一、v-for中为什么要用key

1.vue中列表循环需加:key="唯一标识" 唯一标识尽量是item里面id等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。

2.key主要用来做dom diff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。

3.没有key的时候默认使用的是“就地复用”策略。如果数据项的顺序被改变，Vue不是移动Dom元素来匹配数据项的改变，而是简单复用原来位置的每个元素。如果删除第一个元素，在进行比较时发现标签一样值不一样时，就会复用之前的位置，将新值直接放到该位置，以此类推，最后多出一个就会把最后一个删除掉。

4.尽量不要使用索引值index作key值，一定要用唯一标识的值，如id等。因为若用数组索引index为key，当向数组中指定位置插入一个新元素后，因为这时候会重新更新index索引，对应着后面的虚拟DOM的key值全部更新了，这个时候还是会做不必要的更新，就像没有加key一样，因此index虽然能够解决key不冲突的问题，但是并不能解决复用的情况。如果是静态数据，用索引号index做key值是没有问题的。

5.标签名一样，key一样这时候就会就地复用，如果标签名不一样，key一样不会复用。

二、举例说明

1.在无key的情况下

<ul><li v-for="(item, index) in lists"><input type="checkbox" :value="item.text"/>{{item.text}}</li>
</ul><script>var vm = new Vue({el: '#app',data: {lists: [{ id: 1, text: '张' },{ id: 2, text: '吕' },{ id: 3, text: '王' }]},methods: {remove() {//注意这里是shiftthis.lists.shift()}}})
</script>

（1）选中第一个节点的复选框，点击删除，vue中是这样操作的，删除后新的数据是吕和王，这时会进行比较，第一个节点的标签一样，值不一样，就会复用原来位置的标签，不会做删除和创建，直接将吕赋值张，第一个节点就显示吕了，但是没有删除，在第一个节点中是将复选框选中的，当我们看见好像是把第一个删除了，但是点击后去看复选框的时候还是选中在第一个，如果是直接将第一个节点删除了那么复选框就不会选中，看下图为操作后的效果：

删除前：删除后：

（2）我们在选中最后一个节点的复选框(王前面的复选框)，点击删除，这时候删除完会发现没有被选中的了，我们点击删除时，删除的是第一个数据，但dom中其实是删除的最后一个节点，因为在最后一个节点中的复选框是选中的，但被删除掉了，所以删除完没有选中的复选框了。

删除前：删除后：

总结：当我们选择了第一个第一个多选框，点击删除做删除第一个节点操作，vue中会做两个节点比较，这时候发现标签一样，就会复用原来的位置，将新的节点覆盖到这个位置上，知道最后旧的oldNode多了一项，这时就会删除多余的这一个节点，最后实际上删除的就是最后一个节点。

2.将index做为key

<ul><li v-for="(item, index) in lists" :key="index"><input type="checkbox" :value="item.text"/>{{item.text}}</li>
</ul>

删除前的index是0 1 2，删除后的index是0 1，这时候还会进行复用，因为复用的策略是根据一个唯一标识，不管怎么删这个索引都是会更新到有序的01....，最后key并没有起到作用，所以为了防止这样必须要使用一个唯一的标识来做为key。

3.使用数据中id做为key

<ul><li v-for="(item, index) in lists" :key="item.id"><input type="checkbox" :value="item.text"/>{{item.text}}</li>
</ul>

同上面操作，还是选中第一个节点的复选框，删除前的key是1 2 3，因为删除的是第一个数据，所以删除后的key就是2 3，这时候就会知道2和3是需要复用的，1是被删除掉的，这时候就会根据key找的对应节点做移动，最后删除没有找到key的元素，这时候就正确了。

删除前：删除后：

选中最后一个节点，点击删除

删除前：删除后：

做添加也是同样的操作，没有key会在最后增加一个新的dom，并不是在最开始的dom前做的新增。

三、画图说明：

在无key的情况下，我们可以看到是修改了四次dom，在有key的情况下，只需移动删除，不需要去修改dom，所以我们在使用v-for写上key，防止一会修改数据的时候，出现bug。

vue核心面试题：v-for中为什么要用key相关推荐

vue核心面试题：Vue中相同逻辑如何抽离？
一.mixin 使用vue中的Vue.mixin,给组件每个生命周期.函数等混入一些公共的逻辑,另外混入对象的钩子将在组件自身钩子之前调用..mixin可以放在全局使用,也可以放在组件中使用. vue ...
vue核心面试题：vue中v-html会导致哪些问题
一.理解: 1.可能会导致 xss 攻击.比如用v-html一定要保证你的内容是可以依赖的,例: <input type="text" v-model="msg&q ...
vue常见面试题（附带答案）超实用！！建议收藏！！
一.vue常见面试题二.生命周期函数面试题三.vue路由面试题四.vuex常见面试题一.vue常见面试题 1.vue优点? 答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十 ...
历时一个月！50+Vue经典面试题详解，值得收藏！
大家好,我是若川.持续组织了8个月源码共读活动,感兴趣的可以点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
Vue2【尚硅谷--天禹老师】：Vue核心
目录 1. Vue核心 1.1 介绍与描述 1.2 Vue的特点 1.3 与其他JS框架的关联 1.4 Vue官网的使用指南 2.搭建Vue开发环境 2.1 直接使用 2.2 Hello小案例 2. ...
1. Vue从入门到精通（第一章 vue核心）
Vue从入门到精通(第一章 vue核心) 第一章 Vue核心 1. Vue简介 1.1 Vue是什么? 1.2 Vue的作者以及迭代版本 1.3 Vue的特点 2. 搭建Vue开发环境 2.1 安装V ...
阿瑶的vue学习笔记(1)Vue核心
1. Vue核心 1.1. Vue简介 1.1.1. 官网英文官网中文官网 1.1.2. 介绍与描述动态构建用户界面的渐进式JavaScript框架作者:尤雨溪 1.1.3. Vue的特点遵 ...
js去掉前后空格的函数_2020年最火爆的Vue.js面试题
2020年Vue面试题 Interview ●●●● 作者:@烦恼会解决烦恼 vue核心知识--理论篇 1.对于Vue是一套渐进式框架的理解渐进式代表的含义是:主张最少. Vue可能有些方面是不如R ...
Vue教程1 【Vue核心】
Vue.js 中文文档 (bootcss.com) 使用vue插件 GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debuggi ...

vue核心面试题：v-for中为什么要用key

一、v-for中为什么要用key

二、举例说明

三、画图说明：

vue核心面试题：v-for中为什么要用key相关推荐

最新文章

热门文章