Vue在使用v-for时为什么设置key值，为什么不能用index作为key

为什么设置key值

Vue是不直接操作DOM的，是通过js的Object对象来模拟DOM中的节点，比较虚拟DOM是用的diff的算法。
diff算法的图：

总体意思来说：只会同级比较，不会跨级比较。
举例：

如上图：在同级A,B,C,D四个节点中，在B和C之间插入E,没有key的时候：C更新成了E，D更新成了C，最后插入D，这样效率很低。
加上key之后，就能准确的找到节点的位置：发现ABCD都没变化，直接插入E就可以了。
所以key的作用主要是为了高效的更新虚拟DOM

为什么不能用index作为key

例如一组数：

list：[
	{
		id: 1,
		name: 'a',
		//index: 0
	},
	{
		id: 2,
		name: 'b',
		//index: 1
	},
	{
		id: 3,
		name: 'c',
		//index: 2
	},
	{
		id: 4,
		name: 'd',
		//index: 3
	},
]

这样的页面显示的是：a,b,c,d（默认选中c)
如果key绑定的是index：
删掉index=1的第二组数（b），除了b之外，c和d的index变化了（c变为1了,d的变为2了），所以c和d也都要重新渲染一遍，影响了性能。
刚开始默认选中c（index原来为2），删除b后，d的index变为2了，这时候页面上默认就选中d了，这就产生了bug。