v-for中为什么要使用key

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:'张三'

前后对比之后，发现后三条数据复用了，只有一条数据需要更新渲染

总结

1. key主要用来做dom diff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作。
2. 如果不加key那么key的值默认就是undefined,没有key的时候默认使用的是“就地复用”策略。如果数据项的顺序被改变，Vue不是移动Dom元素来匹配数据项的改变，而是简单复用原来位置的每个元素。
3. 尽量不要使用索引值index作key值，一定要用唯一标识的值，如id等。因为若用数组索引index为key，当向数组中指定位置插入一个新元素后，因为这时候会重新更新index索引，对应着后面的虚拟DOM的key值全部更新了，这个时候还是会做不必要的更新，就像没有加key一样，因此index虽然能够解决key不冲突的问题，但是并不能解决复用的情况。

所以我们在使用v-for写上key，防止一会修改数据的时候，出现bug。