Vue 中的 Patch 过程是怎么工作的？从 VNode 到真实 DOM 的转化全指南

Vue 中的 Patch 过程是怎么工作的？从 VNode 到真实 DOM 的转化全指南

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

简单来说，Vue 的 Patch 过程干的就是一件“聪明事”：它拿着新旧两份虚拟节点（VNode）清单，只去更新真实 DOM 里真正变了的那部分，而不是不管三七二十一，把整棵树推倒重来。这套机制背后的功臣，是 Vue 2 时代的双端 Diff 算法，以及 Vue 3 中性能更优的快速 Diff 算法，两者共同确保了更新既快又准。

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

在深入 Patch 之前，得先搞清楚它处理的是什么原料——VNode。你可以把它理解成一份用 Ja vaScript 对象写成的“施工蓝图”，里面详细描述了真实 DOM 节点的所有信息：标签名、属性、子节点、关键的 key 值，甚至是文本内容。比如下面这个对象：

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

组件第一次挂载时，render 函数会生成这份初始“蓝图”；当数据变化触发重新渲染，一份新的“蓝图”就诞生了。而 Patch 要做的，就是对比这两份新旧蓝图，找出差异并指挥 DOM“施工队”精准作业。

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

当调用 patch(oldVNode, newVNode) 这个核心函数后，整个更新引擎便按一套清晰的逻辑启动：

立即学习“前端免费学习笔记（深入）”；

• 场景一：首次挂载。 如果旧节点是空的（比如初次渲染），那就没什么好比的，直接根据新 VNode 的蓝图，调用 createElm 创建真实的 DOM 元素并插入到容器中。
• 场景二：组件卸载。 如果新节点是空的，意味着组件该退场了。这时会调用 removeVNode，卸载旧节点并移除其对应的 DOM 元素。
• 场景三：同类型节点更新（核心）。 如果新旧节点是同一类型的元素（标签和 key 都相同），那就进入了真正的“打补丁”环节（patchVNode）。这个过程会更新节点的属性、处理事件监听器，并递归地对比它们的子节点列表。
• 场景四：节点类型突变。 如果节点类型都变了（比如从 div 变成了 span），那就没有比对的必要了。Vue 会直接销毁旧 DOM，然后创建全新的 DOM 节点替换上去。当然，这种操作开销较大，在编写代码时应尽量避免。

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

当新旧 VNode 都拥有子节点时，真正的挑战来了。Vue 自然不会傻傻地逐个遍历比对，而是用上了更智能的策略：

• key 是精准定位的“身份证”。 如果没有 key，Vue 会采用一种“就地复用”的策略，这可能导致元素内部状态（如表单输入值）出现错乱。而有了 key，Vue 就能像查身份证一样，精准识别出哪些节点是移动了、新增了还是被删除了。
• Vue 2 的双端 Diff：四指针协同作业。 这种算法会同时从新旧子节点数组的头（oldStart, newStart）和尾（oldEnd, newEnd）四个位置开始比对，通过头尾交叉比较，尽可能减少遍历和 DOM 操作的次数。
• Vue 3 的快速 Diff：效率再升级。 这是 Vue 3 的一项核心优化。它会先跳过新旧列表头部和尾部完全相同的节点（处理公共前后缀），然后对剩下的中间乱序部分，使用“最长递增子序列”算法来计算出一个最小的移动步骤。这套组合拳下来，列表更新的效率得到了大幅提升。

举个例子就明白了：假设子节点从 [A, B, C, D] 变成了 [D, A, B, E]。在 key 的帮助下，Diff 算法能精确判断出：D 被移动到了前面，C 被删除了，并且新增了一个 E。最终，它只会指挥 DOM 执行三次精准操作，而不是盲目地重新渲染整个列表。