vue中:key的作用

如题所述

第1个回答  2022-06-29

可以唯一的确定一个DOM元素,让diff算法更加高效

上边案例重现的是以下过程

不使用key,则 diff 算法默认是这样的:

即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率? 更新了3次,之后做了一次创建插入的操作
所以我们需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。

只使用了一次创建追加的操作

使用key

结论:

点击第二项的delete,

原因很简单,你认为你删除了2,但Vue会认为你做了两件事:

借用官方文档上的例子:

这里如果text发生改变,整个<span>元素会发生更新,因为当text改变时,这个元素的key属性就发生了改变,在渲染更新时,Vue会认为这里新产生了一个元素,而老的元素由于key不存在了,所以会被删除,从而触发了过渡。

假如没有key属性:

那么当text改变时,Vue会复用元素,只改变<span>元素的内容,而不会有新的元素被添加进来,也不会有旧的元素被删除。

同理,key属性被用在组件上时,当key改变时会引起新组件的创建和原有组件的删除,此时组件的生命周期钩子就会被触发。

相似回答