前言
今天测试提了个bug，打开某个弹窗页面就卡死了，弹窗也关不掉。明明是个很简单的页面，排查居然是列表的key值重复了，看来还是不能相信后端的数据呀。
正确使用key
key 是 Vue 用来唯一标识节点的属性，当 key 重复时，Vue 的 diff 算法在更新虚拟 DOM 时无法正确区分不同的元素，从而导致频繁的重绘或错误的更新。使用key时需注意：
- 确保 key 唯一：
- 检查生成 key 的逻辑，确保每个 key 在同一父级内是唯一的。通常使用数据的唯一标识符（如 ID）作为 key。
- 避免使用不稳定的 key：
不要使用像 index 这样的数组索引作为 key，因为当数组顺序改变时，key 不能反映实际元素的变化，导致渲染错误。
排查循环结构：
在 v-for 循环中，确保 key 是基于数据的唯一标识，而不是循环中的临时值。
避免重复：
通过调试工具或者 console.log 打印 key，确保生成的每个 key 都是独一无二的，防止页面卡顿。
vue中key的作用是什么
在 Vue 中，key 的主要作用是帮助 Vue 的虚拟 DOM diff 算法更高效地识别和更新元素。具体来说，key 的作用有以下几点：
- 唯一标识节点：
在使用 v-for 渲染列表时，key 为每个节点提供一个唯一的标识符。这样 Vue 可以根据这个唯一标识符来判断节点是否发生了变化，避免不必要的 DOM 更新。
- 优化性能：
有了 key，Vue 不用简单地按照位置来比较元素，而是根据 key 来追踪元素。这样当列表数据发生变化时，Vue 可以高效地复用已有的 DOM 元素，而不是重新渲染整个列表。
确保组件状态的正确性：
对于带有状态的组件，key 能够保证即使在列表顺序发生变化时，每个组件的状态不会被错误地复用或替换。没有 key 的话，Vue 可能会误认为两个不同组件是同一个组件，从而导致状态混乱。
避免渲染错误：
如果 key 值重复，Vue 会无法区分不同的元素，导致渲染异常或出现意外的重绘、卡顿等问题。因此，key 的唯一性非常重要。
key实现原理
Vue 中 key 的实现原理与其虚拟 DOM 的 diff 算法 密切相关。key 主要用于帮助 Vue 在更新阶段识别元素的唯一性，确保高效、准确的 DOM 更新。以下是 key 在 Vue 中的具体实现原理：
1. 虚拟 DOM 和 Diff 算法
Vue 通过虚拟 DOM 进行 DOM 的更新优化。当数据发生变化时，Vue 会重新生成一个新的虚拟 DOM，然后将新的虚拟 DOM 与旧的虚拟 DOM 进行对比（diff），找出变化的部分，再将这些变化部分映射到真实的 DOM 上。
2. 没有 key 的情况
如果你没有为列表中的元素设置 key，Vue 在进行对比时，会使用一种 基于节点顺序 的对比算法。具体来说，它会：
- 按照顺序逐个对比旧节点和新节点。
- 当发现节点不同或顺序变化时，Vue 可能会复用错误的节点，导致错误的 DOM 更新。
例如，当列表顺序改变时，没有 key 的情况下 Vue 可能会直接复用错误的元素，导致数据和 DOM 不匹配，甚至会丢失组件状态。
3. 有 key 的情况
当为列表中的元素设置了 key 后，Vue 在执行 diff 算法时，会首先根据 key 来匹配新旧虚拟 DOM 中的节点：
- 精确定位：Vue 会使用 key 来判断哪些节点是相同的，哪些节点需要更新、删除或新增。它不会简单地按位置对比，而是根据 key 来进行 精确定位。
- 避免复用错误节点：key 的唯一性确保了 Vue 在处理节点时不会误复用不同的节点，从而保证了 DOM 和数据的一致性。
4. Diff 算法的优化
Vue 的 diff 算法在对比新旧虚拟 DOM 时分为以下几步：
- 从头部对比：从新旧虚拟 DOM 列表的头部开始比较节点。如果 key 相同，就复用该节点，如果不同，则进行必要的 DOM 操作（比如删除旧节点或插入新节点）。
- 从尾部对比：如果头部没有完全匹配，Vue 还会从尾部开始对比，进一步优化匹配过程。
- 双指针中间对比：当无法直接匹配时，Vue 会使用 key 来在旧列表中查找新节点的对应元素。如果找到对应的 key，则进行移动、更新；如果没有，则创建新节点。
5. 为什么 key 唯一性重要
当 key 唯一时，Vue 可以高效地通过 key 进行查找和对比，确保每个元素都能正确更新。如果 key 重复或者缺失，Vue 就无法准确追踪元素，可能会导致错误的节点复用和渲染错误，进而导致性能问题或页面卡顿。
