Vue中的key

关于key,我们常常在v-for中会接触到，当我们需要进行列表循环的时候，如果没有使用key,就会有警报提
示。

1
2
3
4
5
6

//场景一：循环列表
<div v-for="num in numbers" :key="index">
{{num}}
</div>
//场景二：通过时间戳强制重新渲染
<div :key="+new Date()">+new Date()</div>

那么为什么需要key呢？
因为使用key相当于给node添加上一个唯一的id,主要是在DOM DIFF算法中使用的下面我们看个例子：
1.如果上面的场景一
items的值为[1,2,3,4,5,6,7,8,9,10]那么就是渲染出十个div是吧。如果没有key,那么当我们现在items的值变
为[0,1,2,3,4,5,6,7,8,9呢，那么机会第一个原来是”1”的div内容变为0，而原来是”2”的div内容变为”1”..以此类推。（因为没有key属性，Vue无法跟踪每个节点，使用的是“就地复用”得策略，通过这样的方法来完成变更)
但是如果key的情况下，Vue能跟踪每个节点，就会直接新增一个div添拥到内容是”1”的div前面。根据key,更
准确，更快的找到对应的vnode节点。
设置key能够大大减少对页面的DOM操作，提高了diff效率，更加的高效更新虚拟D0M
2.还有的用途就是我们的场景二
用来强制替换元素，当key改变时，Vue认为个新的元素产生了, 从而会新插入一个元素来替换掉原有的元素。
所以上面的元素会被删除而重新添加。但是如果没有添加key的话，就会直接替换dv里面的内容。而不是删
除添加元素。
注意点
尽量不要使用索引index做key的值，要使用唯一的标识值，比如id之类的，因为如果使用数组索引index为
key,当向数组中指定位置插入一个新元素后，因为这时候会重新更新index索引，对应着后面的虚拟DOM的key
值全部更新了，这时候做的更新是没有必要的，就像没有加key一样，因此index虽然能够解决key不冲突的问题，
但是并不能解决复用的情况。如果没有唯一ID的情况下，可以使用用组件的uid拼接index的形式，因为uid是唯一
的。或者生成一个时间戳~。
总结
关于在v-for中使用key是因为使用key相当于给节点添加上一个唯一的id,在DOM DIFF算法中能更高效的更新
虚拟DOM。
当没有使用的时候，如果我们需要对一个循环渲染的列表插入一个，那么实际上会“就地复用”的策略，比如我们
需要在最前面插入一个，那么就会后面的全部往后变更，发生多次DOM操作，这是因为u无法跟踪每个节点，
而使用ky后，节点标识，定位到最前面，然后插入修改，只发生一次DOM操作，大大优化了性能。