Vue的Diff是策略性增量比对，非全量O(n²)比对；Patch是diff结果的自然执行，仅作用于判定变更的节点及必要子树，通过双端剪枝、key映射、v-memo实现三层收敛优化。
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 平衡比对开销的关键，在于三层收敛：
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 结构收敛：双端剪枝让 header、footer、固定前缀等静态区域零比对、零 patch
- 标识收敛：key 强制映射业务语义，避免 index 导致的整块错位重渲染；无 key 时退化为 O(n²) 查找，性能断崖下跌
- 子树收敛：v-memo 包裹静态区域（如详情页顶部栏、表单描述块），依赖不变时连 VNode 构建都跳过，直接复用上一次的渲染结果
举个典型例子：搜索过滤千人通讯录。输入 “张” 后只剩 12 条匹配项。Vue 不会把原来 1000 条和现在 12 条全部拉进来比——而是先双端剪掉空交集（oldEnd item.id），就复用已有组件实例，只 patch 内容；若还用了 v-memo 包裹头像和姓名样式层，那连 class 计算都省了。
本质上，Vue 把“该不该比”“跟谁比”“比多少”全交给可预测的规则，而不是靠开发者手动切分 patch 范围。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
