深入 Vue 3 的 patch 流程：组件更新时到底发生了什么？

深入 Vue 3 的 patch 流程：组件更新时到底发生了什么？
在现代前端框架中，数据驱动视图是核心思想。当我们修改 Vue 3 组件中的响应式数据时，界面会自动更新。这个“自动”的背后，是一套精密、高效的虚拟 DOM (Virtual DOM) 和 Diff 算法在支撑。这套机制的核心就是 patch 流程。理解 patch 流程，不仅能帮助我们写出性能更优的代码，更能让我们从根本上理解 Vue 的运行时机制。

本文将以一个组件的响应式数据变化为起点，层层深入，剖析从数据变更到最终 DOM 更新的全过程，全程约 2000 字。

一、 触发更新：从响应式系统到渲染副作用
一切的起点，源于对响应式数据的修改。假设我们有一个简单的组件：

vue

当 count.value++ 执行时，Vue 的响应式系统（基于 Proxy）会捕获这个 set 操作。它会检查是否有“副作用”需要重新执行。在组件挂载时，Vue 已经为组件的渲染创建了一个副作用渲染函数（effect），并将其与这个响应式数据建立了依赖关系。

这个流程可以概括为：

依赖触发：count.value 的 setter 被调用，通知所有依赖它的副作用重新执行。
调度更新：这个副作用并非立即同步执行，而是被放入一个微任务队列中（通过 queueJob），以避免同一“tick”内的多次数据变化导致重复渲染。
执行渲染副作用：调度器最终会执行组件的更新函数（我们称之为 componentUpdateFn）。这个函数会执行以下核心步骤：
判断组件是否已挂载（instance.isMounted）。
执行组件的 render 函数，生成一个新的虚拟节点树（VNode Tree），我们称之为 nextTree。
获取上一次渲染的旧 VNode 树，即 prevTree（保存在 instance.subTree 中）。
调用核心的 patch 函数：patch(prevTree, nextTree, …)。
至此，更新的接力棒正式交到了 patch 函数手中。

二、 Patch 核心：新旧 VNode 的“双缓冲”比对
patch 函数是 Vue 渲染器的核心，它的职责是对比新旧两棵 VNode 树，并计算出最小的 DOM 操作来更新真实 DOM。这个过程就像是“双缓冲”技术，同时存在新旧两份“画面”，通过比较差异来决定如何修改屏幕上的内容。

patch(n1, n2, …) 函数接收旧 VNode (n1) 和新 VNode (n2)作为参数。其主流程如下：

节点类型判断：
如果 n1 和 n2 不是同一个节点：通过 isSameVNodeType 函数判断，该函数检查 type 和 key 是否相同。如果不同（例如，一个

1. 属性更新 (Props Patching)

Vue 3 在这里做了大量优化。它不再像 Vue 2 那样“一刀切”地全量对比 props。

PatchFlag 优化：在编译阶段，Vue 会分析模板，为每个 VNode 节点打上一个 patchFlag 标记。例如，一个只有动态 class 的 div 会被标记为 PatchFlags.CLASS。在运行时，patch 函数只需检查这个 flag，然后只更新标记过的属性，而不需要遍历所有属性。这极大地减少了比较次数。
全量对比：如果节点没有 patchFlag（例如包含动态 key），则会进行全量 props 对比。
事件处理：对于事件（以 on 开头的 props），Vue 会使用 invokers 对象缓存事件处理器，避免重复添加和移除。
2. 子节点更新 (Children Diff)

这是整个 patch 流程中最复杂、最关键的部分。当新旧节点都有子节点时，Vue 会采用一种高效的双端比较算法来最小化 DOM 移动。

Diff 算法的核心步骤：

头部同步：从新旧子节点数组的头部开始，逐个比较 key 和 type 相同的节点，直接调用 patch 复用。直到遇到不相同的节点为止。
尾部同步：从新旧子节点数组的尾部开始，向前逐个比较，复用相同的节点。
未知序列处理：经过头尾同步后，中间剩下的就是“未知序列”。此时，算法会进入最复杂的移动和增删逻辑：
建立索引：为新子节点数组建立一个 key 到 index 的映射表 (keyToNewIndexMap)，以便 O(1) 时间复杂度查找旧节点是否存在于新节点中。
遍历旧节点：正序遍历旧的未知子节点序列。
如果旧节点在新节点中不存在（keyToNewIndexMap 中找不到），则卸载该旧节点。
如果存在，则找到其在新序列中的位置 (newIndex)，并更新 patch 函数的参数，然后执行 patch 复用。同时，通过比较 newIndex 和一个记录最大索引的变量 maxNewIndexSoFar 来判断节点是否需要移动。如果 newIndex < maxNewIndexSoFar，则说明节点位置发生了相对后移，需要移动。
最长递增子序列 (LIS)：为了以最小代价移动节点，Vue 3 采用了“贪心 + 二分查找”的算法来求解新节点索引序列的最长递增子序列。只有不在 LIS 中的节点才需要被移动。这将移动操作的时间复杂度从 O(N²) 优化到了 O(N log N)。
挂载新节点：遍历完旧节点后，新节点序列中剩余的节点都是需要新增的，调用 mount 挂载它们。
通过这套精密的算法，Vue 能够智能地识别出节点的新增、删除和移动，并以最少的 DOM 操作完成更新。

四、 组件更新：递归的渲染链
当 processComponent 被调用时，意味着要更新一个子组件。这个过程本身也是一个递归的 patch 过程：

更新组件实例：首先，组件的 props、slots 等可能会被更新。
触发子组件更新：调用子组件实例的 update 方法。这个 update 方法本质上也是一个 effect，它会触发子组件的重新渲染。
子组件重新渲染：子组件执行自己的 render 函数，生成新的子树 nextTree。
递归 Patch：父组件的 patch 流程会拿到子组件的旧子树 prevTree 和新子树 nextTree，然后再次调用 patch(prevTree, nextTree, …)。
这个过程会沿着组件树向下递归，形成一条完整的“渲染-更新”链。每一层组件都在重复“生成新 VNode -> Diff -> 更新 DOM”的流程。

五、 性能优化的基石：Block 与静态提升
Vue 3 的高性能不仅来自于 Diff 算法，还来自于编译时的优化。

静态提升 (Static Hoisting)：编译器会识别出模板中永远不会改变的静态节点（如不包含动态绑定的

onBeforeUpdate：在组件 patch 流程开始之前，即新 VNode 树已生成但 DOM 尚未更新时调用。此时可以访问到旧的 DOM 状态。
onUpdated：在组件 patch 流程结束之后，即 DOM 已经更新完毕时调用。此时可以访问到更新后的 DOM 状态。
重要提示：严禁在 onUpdated 钩子中修改响应式数据，这会导致无限的更新循环。

总结
Vue 3 的组件更新流程是一个从响应式系统触发，经过 patch 函数核心调度，再到精细化 Diff 算法执行的复杂而高效的过程。它通过：

响应式驱动：精确追踪数据依赖，按需触发更新。
虚拟 DOM Diff：通过新旧 VNode 树的对比，计算最小 DOM 操作。
高效的子节点 Diff 算法：利用双端比较和最长递增子序列，将移动操作优化到 O(N log N)。
编译时优化：通过静态提升、Block 和 PatchFlag，在运行时跳过大量不必要的比较和更新。
这套机制共同构成了 Vue 3 强大而高效的渲染系统，使得开发者可以专注于业务逻辑，而将复杂的 DOM 操作优化交给框架底层自动处理。深入理解这一流程，不仅能帮助我们更好地调试和优化应用，更能让我们体会到现代前端框架设计的精妙之处。