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

最新推荐文章于 2024-07-17 09:30:21 发布

L-weixin-45629194

最新推荐文章于 2024-07-17 09:30:21 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/weixin_45629194/article/details/104969834

版权

Vue不直接操作DOM，而是通过虚拟DOM和diff算法提高性能。设置key值能确保高效更新节点，避免错误的同级比较。但使用index作为key时，当数据变动，会导致相邻元素因index改变而重新渲染，影响性能并可能引发bug。

摘要由CSDN通过智能技术生成

为什么设置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
	},
]