vue中:key的作用
发布网友
发布时间：2023-03-21 10:48
共1个回答
热心网友
时间：2023-05-14 14:22
可以唯一的确定一个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改变时会引起新组件的创建和原有组件的删除，此时组件的生命周期钩子就会被触发。
