详解key在Vue列表渲染时究竟起到了什么作用

Vue2+采用diff算法来进行新旧vnode的对比从而更新DOM节点。而通常在我们使用v-for这个指令的时候，Vue会要求你给循环列表的每一项添加唯一的key，那么这个key在渲染列表时究竟起到了什么作用呢？ 在解释这一点之前，你最好已经了解Vue的diff算法的具体原理是什么。 Vue2更新真实DOM的操作主要是两种：创建新DOM节点并移除旧DOM节点和更新已存在的DOM节点，这两种方式里创建新DOM节点的开销肯定是远大于更新或移动已有的DOM节点，所以在diff中逻辑都是为了减少新的创建而更多的去复用已有DOM节点来完成DOM的更新。 在新旧vnode的diff过程中，key是判断两个 在Vue2中，当涉及到列表渲染，即使用`v-for`指令遍历数组或对象时，Vue会推荐为每一个循环出来的元素提供一个唯一的`key`属性。`key`的作用至关重要，它与Vue的虚拟DOM（vDOM） diff算法密切相关，直接影响到DOM操作的效率和准确性。 Vue的diff算法是为了最小化DOM操作，提高性能。它主要分为两个步骤：创建新DOM节点和更新/移动已存在DOM节点。创建新节点的开销远大于更新或移动现有节点，因此Vue尽可能地重用已有的DOM节点，避免不必要的创建。 `key`在这个过程中扮演了识别节点身份的角色。在比较新旧vnode（虚拟DOM节点）时，Vue首先会检查它们的`key`是否相同，这是判断两个节点是否为同一个的基础。如果`key`值相等，Vue会认为这两个节点代表的是同一份数据，即使它们的其他属性（如标签名、属性等）发生了变化，Vue也会尝试通过更新原有DOM节点来达到预期效果，而不是删除旧节点并创建新的。在`updateChildren`方法中，Vue根据`key`值进行精确匹配，执行对应的操作，如移动节点、更新节点或创建新节点。 当没有提供`key`时，Vue会依赖元素的位置顺序来决定如何更新。如果列表中的元素顺序改变，Vue可能无法正确识别，导致错误的更新或重新排序，甚至可能导致不必要的DOM重绘。此外，没有`key`的情况下，Vue会使用一种称为"列表重排优化"的策略，即尽量通过移动DOM节点而不是销毁和重建，但这种优化可能并不总是有效，尤其是在数据频繁变动且顺序无规律时。 提供`key`的好处如下： 1. **准确性**：`key`能确保即使数据顺序改变，Vue也能准确地找到对应的数据项，正确地更新或移动对应的DOM节点。 2. **性能提升**：`key`帮助Vue快速定位到应该更新的节点，减少了不必要的比较和DOM操作，提高了渲染性能。 3. **组件状态保留**：当列表元素是组件时，`key`可以确保组件的状态在列表更新后得以保留，避免因为节点复用而引发的意外状态重置。 `key`在Vue列表渲染中起到标识符的作用，它使Vue能够更高效、准确地处理列表的更新，尤其是在数据动态变化时，保证了用户体验的连贯性。因此，在进行列表渲染时，尤其是当列表数据有复杂的更新逻辑时，提供`key`是非常必要的。