Vue 中的 Diff 算法是其虚拟 DOM（Virtual DOM） 实现的核心，负责在数据变化时，高效比较新旧虚拟 DOM 树的差异，并计算出最小的 DOM 操作，从而提升性能。其核心设计围绕 “同层比较” 和 “双端比较” 策略，旨在减少不必要的 DOM 操作，实现高效更新。 下面这个表格汇总了 Vue Diff 算法的核心策略与关键机制，帮你快速把握全局。
| 核心策略/机制 | 核心目标 | 具体实现方式 |
|---|---|---|
| 同层比较 | 降低复杂度，避免跨层级比对 | 只比较同一层级的节点，不跨层级移动。若节点类型不同，直接替换。 |
| 双端比较 | 快速处理常见顺序变动（头尾增删） | 使用四个指针（新旧列表的头尾）进行头-头、尾-尾、头-尾、尾-头四次比对。 |
| Key 的作用 | 精准识别节点身份，优化列表复用 | 为 v-for的每一项提供稳定唯一的 key，帮助算法在顺序变动时准确找到可复用节点。 |
| 最长递增子序列 | 最小化节点移动次数（Vue 3 优化） | 在复杂顺序变动中，找出最长的不需要移动的节点序列，仅移动不在序列中的节点。 |
🔧 工作原理详解
Vue 的 Diff 算法过程可以概括为以下几个关键步骤：
-
节点比较（Patch） 当开始比较两个 VNode 时，首先判断它们是否为相同节点（依据是
key和标签名tag等）。- 不同类型节点：如果节点类型不同（例如从
div变为span），算法会直接销毁旧节点及其子节点，并创建并插入新节点。 - 相同类型节点：如果节点类型相同，算法会进入
patchVnode 过程，进一步比较和更新节点的属性（如class、style）、文本内容，然后递归地比较它们的子节点列表。
- 不同类型节点：如果节点类型不同（例如从
-
子节点列表比较（UpdateChildren） 这是 Diff 算法最核心的部分，用于高效更新子节点列表。Vue 采用了双端指针法。 算法会初始化四个指针，分别指向新旧子节点列表的头部和尾部（
oldStartIdx,oldEndIdx,newStartIdx,newEndIdx），然后在一个循环中依次进行以下四种尝试：- 头头比较：如果旧头节点和新头节点是相同节点，则对这两个节点进行
patchVnode，然后两个头指针向后移动。 - 尾尾比较：如果旧尾节点和新尾节点是相同节点，则对这两个节点进行
patchVnode，然后两个尾指针向前移动。 - 头尾比较：如果旧头节点和新尾节点是相同节点，说明该节点在旧列表头部，但在新列表尾部。算法会对该节点进行
patchVnode，然后将该节点对应的 DOM 元素移动到当前旧列表尾部节点的后面，旧头指针后移，新尾指针前移。 - 尾头比较：如果旧尾节点和新头节点是相同节点，说明该节点在旧列表尾部，但在新列表头部。算法会对该节点进行
patchVnode，然后将该节点对应的 DOM 元素移动到当前旧列表头部节点的前面，旧尾指针前移，新头指针后移。
如果以上四种情况都不匹配，算法会尝试使用 Key 映射表。它会根据新头指针指向节点的
key，在一个预先建立的（旧节点key到索引位置的）映射表中查找是否存在可复用的旧节点。- 找到可复用节点：则将该节点移动到当前旧列表头部节点的前面，并将旧列表中对应位置的节点标记为已处理（例如设为
undefined）。 - 未找到可复用节点：说明这是一个新节点，直接创建对应的 DOM 元素并插入到当前旧列表头部节点的前面。
循环持续直到新旧节点列表中的任一队列被处理完毕。之后：
- 如果新列表有剩余节点，说明这些是新增的节点，批量创建并插入到适当位置。
- 如果旧列表有剩余节点，说明这些节点在新列表中已不存在，批量删除它们。
- 头头比较：如果旧头节点和新头节点是相同节点，则对这两个节点进行
💡 关键优化：key的重要性
为 v-for循环的每一项提供一个稳定且唯一的 key 至关重要。
- 高效复用：当列表顺序发生变化时（如排序、插入），
key帮助 Diff 算法精准识别出哪些节点可以复用，从而避免大量的 DOM 销毁和创建操作，显著提升性能。 - 避免状态错乱：对于含有内部状态（如表单输入值）的组件，稳定的
key能确保节点被正确复用，防止状态错乱。 - 避免使用索引作为 key：使用数组索引
index作为key在列表发生非末尾增删时，会导致错误的节点复用和性能问题，因此不推荐。
⚙️ Vue 3 的进阶优化
Vue 3 在 Diff 算法上做了进一步优化，在处理复杂序列变动时，会利用最长递增子序列（LIS） 算法。该算法能找出一组节点在新旧序列中相对位置没有发生变化的最长序列。算法会尽量保持这些节点不移动，只移动其他节点，从而最小化 DOM 的移动操作。
💎 总结
Vue 的 Diff 算法通过 同层比较、双端比较 和 Key 复用 等策略，智能地找出虚拟 DOM 的最小差异，并将这些差异高效地应用到真实 DOM 上。理解其原理，有助于你写出性能更优的 Vue 代码，例如始终为列表项提供稳定的 key。 希望这些解释能帮助你清晰地理解 Vue 中 Diff 算法的工作原理。如果你对特定细节，比如 patchVnode的具体过程或 Vue 3 的 Block Tree 优化还想进一步了解，我们可以继续探讨。
