vue中v-for循环的时候为啥要添加:key属性

Posted 2023-04-19

参考技术A 官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。
这个其实和Vue的虚拟DOM的Diff算法有关系。
这里我们借用React’s diff algorithm中的一张图来简单说明一下：

当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点
我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。
即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
所以我们需要使用key来给每个节点做一个唯一标识
Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点。

Vue方向：v-for循环中的key属性

参考技术A v-for循环中的key属性

使用v-for更新已渲染的元素列表时，默认用就地复用策略，列表数据修改的时候，他会根据key值去判断某个值是否修改，如果修改，则重新渲染这一项，否则复用之前的元素；我们在使用的时候经常会使用index（即数组的下标）来作为key，但其实这是不推荐的一种使用方法；

key值的使用其实是和vue响应式以及虚拟DOM有关。

这样vue就会分析到其他的数据都不需要改变，只需要在新增一个DOM节点，然后添加新增的数据就可以了。

但是，如果输入我们是在数组中间插入的数据就会不一样了。

即后面的节点会不断的更新，这样做就会很没效率。

所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

key的作用主要是为了高效的更新虚拟DOM，另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

建议尽可能在使用v-for时提供key，除非遍历输出的DOM内容非常简单，或者刻意依赖默认行为以获取性能上的提升。