Vue 3 Diff 算法受 `v-for` 循环中的 `key` 属性影响

Vue 3 的 Diff 算法会受到 v-for 循环中的 key 属性的影响，key 的选择直接关系到 Diff 算法的效率和最终的 DOM 更新结果。

---

key 的作用

在 Vue 中，key 是一种标识，它用于唯一标记每个虚拟 DOM 节点。Diff 算法会根据 key 判断新旧节点是否是同一个节点。

没有 key 时

• 如果没有 key，Vue 会默认使用节点的索引值作为标识。
• 当列表发生变化时，由于索引可能对应了错误的节点，会导致无法正确复用现有节点，从而增加不必要的 DOM 操作。

有 key 时

• 当指定了唯一的 key，Vue 可以准确匹配新旧节点。
• 这样可以复用相同 key 的节点，避免误匹配或冗余操作，提高性能。

---

Diff 算法如何处理 key

1. key 匹配规则

   • 在 Diff 过程中，如果新旧节点的 key 相同，Vue 会认为它们是相同的节点，执行更新操作而非重建。
   • 如果 key 不同，Vue 会移除旧节点并创建新节点。

2. 有 key 的场景

   • Vue 通过 key 快速定位新旧节点在列表中的位置，避免盲目比较，从而优化性能。
   • Vue 3 使用 最长递增子序列（LIS） 算法来减少 DOM 操作，key 的稳定性是实现该优化的重要前提。

3. 没有 key 的场景

   • Vue 会退化为按索引逐一比较的模式。
   • 如果数据顺序发生变化，可能会导致大量的节点重建和移动。

---

案例分析

示例 1：没有 key 的情况

<template><div><div v-for="item in items">{{ item }}</div></div>
</template><script>
export default {data() {return {items: [1, 2, 3]};},mounted() {setTimeout(() => {this.items = [3, 2, 1]; // 改变顺序}, 1000);}
};
</script>

结果：

• Vue 会将 [1, 2, 3] 和 [3, 2, 1] 按索引逐个对比。
• 由于没有 key，节点内容不同，导致所有节点被替换，性能较差。

示例 2：使用唯一的 key

<template><div><div v-for="item in items" :key="item">{{ item }}</div></div>
</template><script>
export default {data() {return {items: [1, 2, 3]};},mounted() {setTimeout(() => {this.items = [3, 2, 1]; // 改变顺序}, 1000);}
};
</script>

结果：

• Vue 根据 key 匹配节点 [1, 2, 3] 和 [3, 2, 1]，只移动节点位置，而不会销毁重建。
• 这样可以显著减少 DOM 操作，提高性能。

---

key 影响 Diff 的性能与结果

1. 性能影响

   • 没有 key：Vue 需要逐个比对每个节点的内容，无法充分复用节点。
   • 有 key：Vue 可以快速确定哪些节点需要更新、移动或删除，从而减少不必要的 DOM 操作。

2. 更新结果的准确性

   • 没有 key：可能会导致节点错误复用，渲染结果不符合预期。
   • 有 key：可以确保每个节点的复用和更新都是正确的。

<template><div class="ForKeyInDiffVNode"><el-button @click="change">改变值</el-button><div class="item-class" v-for="(item, idx) in lists" :key="idx"><el-checkbox></el-checkbox><span>{{ item.name }}</span></div></div>
</template><script setup lang="ts">
import {ref} from "vue";const lists = ref([{name: 'hmk',age: 20,show: false},{name: '张三',age: 21,show: false},{name: '李四',age: 22,show: false},{name: '王五',age: 23,show: false}
])
// 之前选中第三个，点击删除后，会出现错乱情况
// 给key加上一个唯一的id即可解决问题
const change = () => {lists.value.splice(1, 1)
}</script>

---

最佳实践：key 的选择

1. 使用唯一标识符

   • 使用数据中的唯一标识（如 ID）作为 key：

     <div v-for="item in items" :key="item.id">{{ item.name }}</div>
     

   • 避免使用非唯一的值（如索引）作为 key，因为数据顺序变化时可能会导致错误复用。

2. 避免使用索引作为 key

   • 索引是动态的，当列表顺序改变或元素插入时，索引会变化，导致 Diff 结果不准确：

     <div v-for="item in items" :key="index">{{ item }}</div>
     

   • 如果数据内容变化频繁，索引 key 会导致不必要的 DOM 重建。

3. 保证 key 的稳定性

   • key 应该在组件的整个生命周期内保持不变，否则会导致 Diff 结果错误。

---

总结

1. key 对 Diff 算法至关重要：

   • 没有 key：Vue 会按索引匹配，导致错误复用和性能下降。
   • 有 key：Vue 可高效、准确地更新节点，减少 DOM 操作。

2. 选择唯一且稳定的 key：

   • 推荐使用数据中的唯一标识符（如 id）。
   • 避免使用索引或动态值作为 key。

3. Diff 性能优化：

   • Vue 3 使用 key 时可以充分利用最长递增子序列（LIS）优化算法，最小化 DOM 移动和更新操作，提高性能。