Patch的核心目标是高效更新DOM，即通过对比新旧VNode，仅更新真实DOM中变化的部分；其基础是VNode，主流程包括首次挂载创建、卸载移除、同类型打补丁或异类型替换；子节点Diff依赖key实现精准复用，Vue 2用双端Diff，Vue 3升级为快速Diff算法。

Patch 的核心目标：高效更新 DOM

Vue 的 Patch 过程本质是“用新 VNode 对比旧 VNode，只更新真实 DOM 中真正变化的部分”，而不是暴力重渲染整棵 DOM 树。它基于 双端 Diff 算法（在 Vue 2 中）或 快速 Diff 算法（Vue 3 的核心优化），兼顾性能与准确性。

VNode 是什么？它是 Patch 的输入基础

VNode（Virtual Node）是用 JavaScript 对象描述的真实 DOM 节点，包含标签名、属性、子节点、key、文本等内容。例如：

{ tag: 'div', data: { class: 'box' }, children: [{ text: 'Hello' }] }

组件首次挂载时，render 函数生成初始 VNode；数据变化后，重新执行 render 得到新 VNode。Patch 就是在这两个 VNode 之间做比对。

Patch 的主流程：从根节点开始递归更新

调用 patch(oldVNode, newVNode) 后，Vue 按以下逻辑推进：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• 如果 oldVNode 为空（首次挂载），直接调用 createElm(newVNode) 创建真实 DOM 并插入父容器
• 如果 newVNode 为空（组件卸载），调用 removeVNode(oldVNode) 卸载并移除对应 DOM
• 如果两者都是同一类型的元素（tag 相同且 key 相同），进入 打补丁（patchVNode） 流程：更新属性、处理事件、递归对比子节点
• 如果类型不一致（如 div → span），直接销毁旧 DOM，新建新 DOM（开销较大，应避免）

子节点 Diff：关键在 key 和双端策略

当两个 VNode 都有 children 时，Vue 不会逐个遍历比对，而是采用更智能的方式：

• key 是唯一标识：没有 key 时，Vue 默认用“就地复用”策略（可能引发状态错乱）；有 key 才能精准定位节点移动、新增或删除
• Vue 2 使用 双端 Diff：同时从新旧子节点的头尾四点（oldStart / oldEnd / newStart / newEnd）比对，减少遍历次数
• Vue 3 进一步优化为 快速 Diff：先处理公共前后缀，再用最长递增子序列（LIS）算法计算最小移动步骤，大幅提升列表更新效率

例如：[A,B,C,D] → [D,A,B,E]，带 key 的 Diff 能识别出 D 前移、C 删除、E 新增，仅执行三次 DOM 操作。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！