vue中key的用法

加key是提升vue渲染效率,减少DOM操作。

vue列表元素的更新机制:

当列表元素没有设置key的时候,vue判断是否操作这个DOM元素,是根据新旧两次数据的元素顺序进行对比,看一下元素内容是否发生变化。发生变化vue就操作这个DOM元素,没有变就不操作这个DOM元素。

当列表元素设置了key的时候,vue判断新旧dom内容是否发生变化的时候,不再按照顺序对比了,而是找相同key值得元素进行对比,不受顺序得影响了。能始终保证只操作变化了得DOM元素。

**问题:**遍历数据得索引能否作为key值?

不能,因为索引是按元素顺序生成的。且始终从0开始,因此和不设置key效果一样了。

案例:

不加:key="item":

javascript 复制代码
<template>
  <div>
    <h3 style="color: #f69">key的用法</h3>
    <p v-for="item in arr">{{ item }}</p>
    <!-- <button @click="arr.push(4)">添加</button> -->
    <button @click="arr.unshift(4)">添加</button>
    <!-- 用:key 元素单个添加,不改变原有元素,不用:key 元素都变动,改变原有元素 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [1, 2, 3],
    };
  },
  methods: {},
  created: {},
};
</script>

运行:

加key="item":

javascript 复制代码
<template>
  <div>
    <h3 style="color: #f69">key的用法</h3>
    <p v-for="item in arr" :key="item">{{ item }}</p>
    <!-- <button @click="arr.push(4)">添加</button> -->
    <button @click="arr.unshift(4)">添加</button>
    <!-- 用:key 元素单个添加,不改变原有元素,不用:key 元素都变动,改变原有元素 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [1, 2, 3],
    };
  },
  methods: {},
  created: {},
};
</script>

运行:

相关推荐
zero13_小葵司2 分钟前
Vue 3 前端工程化规范
前端·javascript·vue.js
Yolanda_20223 分钟前
vue-sync修饰符解析以及切换iframe页面进行保存提示功能的思路
前端·javascript·vue.js
Pu_Nine_94 分钟前
深入理解节流(Throttle):原理、实现与应用场景
javascript·性能优化·es6·节流·lodash 库
伍哥的传说5 分钟前
Vite Plugin PWA – 零配置构建现代渐进式Web应用
开发语言·前端·javascript·web app·pwa·service worker·workbox
ai产品老杨8 分钟前
解锁仓储智能调度、运输路径优化、数据实时追踪,全功能降本提效的智慧物流开源了
javascript·人工智能·开源·音视频·能源
GDAL8 分钟前
Quat.js四元数完全指南
javascript·quaternion
alphageek812 分钟前
Electron开源库入门教程:跨平台桌面应用框架
javascript·其他·electron·开源
小桥风满袖44 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心44 分钟前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode