全量 Diff 与局部 Patch 区别解析

Vue 的 Diff 并非低效的全量比对，也不是开发者手动控制的“局部 Patch”，而是一套高度优化的增量更新机制：通过双端剪枝快速跳过稳定节点、key 映射精准识别可复用元素、LIS 算法智能处理移动逻辑，并结合 v-memo 实现子树级跳过，三层收敛共同将比对与 DOM 操作压缩到真正变化的最小范围——例如千人通讯录搜索后仅更新12条匹配项，且连头像样式层都能零计算复用，让性能始终聚焦于业务本质，而非框架开销。

Vue 不做“全量 Diff”，也不直接执行“局部 Patch”——这两个说法容易引起误解，需要先厘清概念。

全量 Diff 并非 Vue 的设计逻辑。它指的是对新旧两棵完整的虚拟 DOM 树逐节点、递归比对，时间复杂度接近 O(n²)，这在 Vue 中并不存在。Vue 的 Diff 是有策略的增量比对：通过双端同步剪枝快速跳过首尾稳定节点，仅对中间变动段构建 key 映射表，并用最长递增子序列（LIS）优化移动逻辑。实际参与深度比对的节点数量通常远小于列表总长，尤其在滚动加载或局部更新场景下，真正进入核心 Diff 流程的可能只有几十项。

局部 Patch 也不是一个独立操作步骤。Patch 在 Vue 中是 diff 后的自然结果：对每个需要更新的 VNode，调用 patch 函数执行真实 DOM 的属性修改、事件绑定、子节点增删等。所谓“局部”，是指它只作用于 diff 判定出的变更节点及其必要子树，而非整页重绘。比如一个列表中仅第 3 项内容变化，Vue 就只 patch 那个对应 li 元素的 textContent 和 class，其余 999 项完全跳过 DOM 操作。

Vue 平衡比对开销的关键，在于三层收敛：

• 结构收敛：双端剪枝让 header、footer、固定前缀等静态区域零比对、零 patch
• 标识收敛：key 强制映射业务语义，避免 index 导致的整块错位重渲染；无 key 时退化为 O(n²) 查找，性能断崖下跌
• 子树收敛：v-memo 包裹静态区域（如详情页顶部栏、表单描述块），依赖不变时连 VNode 构建都跳过，直接复用上一次的渲染结果

举个典型例子：搜索过滤千人通讯录。输入 “张” 后只剩 12 条匹配项。Vue 不会把原来 1000 条和现在 12 条全部拉进来比——而是先双端剪掉空交集（oldEnd < start），立刻判定旧列表全卸载、新列表全创建；接着对这 12 条，若 key 稳定（如 item.id），就复用已有组件实例，只 patch 内容；若还用了 v-memo 包裹头像和姓名样式层，那连 class 计算都省了。

本质上，Vue 把“该不该比”“跟谁比”“比多少”全交给可预测的规则，而不是靠开发者手动切分 patch 范围。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《全量 Diff 与局部 Patch 区别解析》文章吧，也可关注golang学习网公众号了解相关技术文章。