Vue中使用v-for时key的相关问题

无论是在react或者vue开发中，我们会遇到key的相关报错的烦恼，比如：不用key，或者选择的key不合理。那么今天小编给你分析分析里面的小秘密

1、v-for为啥要用key？

Vue和React的渲染原理都实现了一套虚拟DOM,使我们可以不直接操作DOM元素，只是操作数据就可以重新渲染页面，背后的‘男人’就是高效的Diff算法
Vue和React的Diff算法大致相同，都是用这三大策略Tree Diff、Component Diff、Element Diff,通过这三层依次的遍历比较，使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。

• 蓝色的一层为：Tree Diff 树每一层进行遍历
• 黄色的一层为：Component Diff 是数据层面的差异比较
• 绿色的一层为：Element Diff真实DOM渲染，结构差异的比较

我们了解了Diff算法是怎么操作的，那么就不难分析出为什么需要用这个key，举个例子吧
我们需要在B和C之间插入F

如果不用key，就会先把F插进来，然后依次去替换

这样的话C更新为F,D更新为C，E更新为D，E为新插入，这样的性能是比较低的
但是如果用到key，那么之间把F插入，不影响到其他的顺序了，就是一个单纯的插入

2、为什么index不能做为key?

删除第二项后

这个时候，我们的key绑定的关系重新发生了改变了，导致重新会匹配一次，重新渲染，甚至会报错，严重影响性能。所有key尽量用确定的唯一标识去绑定，这样就不容易报错