Vue中v-for为什么必须要key？为什么不能用index作为key？

1. 首先要知道Vue以及React都使用了虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而他们都是通过diff算法来对比虚拟DOM前后的变化，从而更新节点。在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。

当页面的数据发生变化时，Diff算法只会比较同一层级的节点：

如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点。

如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。

总而言之，key的作用主要是为了高效的更新虚拟DOM 。

2. 为什么不用index作为key呢，是因为，如果在一个v-for list里面，删除中间的一个item，这个时候这个item后面所有的index都会变化，那么diff就会计算出后面的item的key-index映射都发生了变化，就会全部重新渲染，大大影响了性能。而且这也会导致一些bug，比如当删除了item2的时候，再选中item3就会变成选中item4。