key是什么
key是给每一个
vnode的唯一id
,也是diff的一种优化策略,可以根据key,更准确, 更快的找到对应的vnode节点
diff算法
diff的比较过程只会在同层级比较,不会跨级比较。 整体的比较过程可以理解为一个层层递进的过程。
当不加key
复用原则:当标签上的key和标签名tag一样就会复用
向数组首部添加一个元素:
之前的数据 之后的数据
key:undefined index: 0 name:'C' key:undefined index:0 name:'D'
key:undefined index: 1 name:'B' key:undefined index:1 name:'C'
key:undefined index: 2 name:'A' key:undefined index:2 name:'B'
key:undefined index:3 name:'A'
以上,D复用C,C复用B,B复用A,添加了A。 4次渲染
当加key
如果我们使用index
作为key
向数组首部添加一个元素:
之前的数据 之后的数据
key:0 index: 0 name:'C' key:0 index:0 name:'D'
key:1 index: 1 name:'B' key:1 index:1 name:'C'
key:2 index: 2 name:'A' key:2 index:2 name:'B'
key:3 index:3 name:'A'
通过上面清晰的比较。四条数据都必须重新渲染。
所以我们最好使用唯一的标识
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
或者用时间戳
<con :key="+new Date()" />
之前的数据 之后的数据
key:3 index: 0 name:'王五' key:4 index:0 name:'赵六'
key:2 index: 1 name:'李四' key:3 index:1 name:'王五'
key:1 index: 2 name:'赵六' key:2 index:2 name:'李四'
key:1 index:3 name:'张三'
前后对比之后,发现后三条数据复用了,只有一条数据需要更新渲染
总结
- key主要用来做dom diff算法用的,diff算法是
同级比较
,比较当前标签上的key还有它当前的标签名,如果key和标签名都一样时只是做了一个移动的操作。 - 如果不加key那么key的值默认就是
undefined
,没有key的时候默认使用的是“就地复用”策略。如果数据项的顺序被改变,Vue不是移动Dom元素来匹配数据项的改变,而是简单复用原来位置的每个元素。 - 尽量不要使用索引值index作key值,一定要用唯一标识的值,如id等。因为若用数组索引index为key,当向数组中指定位置插入一个新元素后,因为这时候会重新更新index索引,对应着后面的虚拟DOM的key值全部更新了,这个时候还是会做不必要的更新,就像没有加key一样,因此index虽然能够解决key不冲突的问题,但是并不能解决复用的情况。
所以我们在使用v-for写上key,防止一会修改数据的时候,出现bug。