patch函数

Patch函数

Patch函数概述【核心概念】
Patch函数是Vue3渲染器的核心，负责将虚拟DOM（VNode）转换为真实DOM，并在数据变化时高效地更新视图[reference:0][reference:1]。它通过比较新旧VNode树的差异，精准地找出需要变更的节点，并执行最小化的DOM操作，从而避免了整体重新渲染带来的性能损耗[reference:2]。Patch是连接虚拟DOM与真实DOM的桥梁，也是Vue3高性能渲染的关键。
Patch函数的核心作用【考点】
接收新旧VNode节点和挂载容器，通过比较差异来执行DOM更新。具体包括以下几类操作[reference:3][reference:4]：
- 创建新增的节点：当旧VNode树中不存在而新VNode树中存在时，创建相应DOM节点并插入。
- 移除废弃的节点：当新VNode树中不再存在旧VNode树中的节点时，从DOM中移除。
- 移动或更新节点：当节点类型相同但属性或子节点变化时，复用DOM节点并更新其属性和子节点。
为什么Patch函数高效？
传统的DOM更新方式是整体替换或手动操作，效率低下。Patch函数通过算法对比，只更新必要的部分。例如，直接使用innerHTML替换会导致整个DOM子树被销毁和重建，而Patch函数可能只修改一个文本节点的内容，避免了大量DOM操作。

Patch函数的工作流程【原理】
Patch函数的工作流程是一个多阶段的分发与递归过程，确保不同类型的VNode（组件、普通元素、文本等）得到正确的处理。

① 整体流程
下图展示了Patch函数从接收新旧VNode到最终完成DOM更新的完整流程：

② 关键代码逻辑
Patch函数首先进行一系列前置判断：

const patch = (n1, n2, container, anchor, parentComponent, ...) => {
  // 1. 如果新旧VNode相同，直接返回
  if (n1 === n2) return
  
  // 2. 如果新旧VNode类型或key不同，则卸载旧节点
  if (n1 && !isSameVNodeType(n1, n2)) {
    anchor = getNextHostNode(n1)
    unmount(n1, parentComponent, parentSuspense, true)
    n1 = null
  }
  
  // 3. 根据新节点类型分发处理
  const { type, shapeFlag } = n2
  switch (type) {
    case Text: processText(n1, n2, container, anchor); break
    case Comment: processCommentNode(n1, n2, container, anchor); break
    case Static: if (n1 == null) mountStaticNode(n2, container, anchor, isSVG); break
    case Fragment: processFragment(...); break
    default:
      if (shapeFlag & ShapeFlags.ELEMENT) {
        processElement(n1, n2, container, ...)
      } else if (shapeFlag & ShapeFlags.COMPONENT) {
        processComponent(n1, n2, container, ...)
      } else if (shapeFlag & ShapeFlags.TELEPORT) {
        Teleport.process(...)
      } else if (shapeFlag & ShapeFlags.SUSPENSE) {
        Suspense.process(...)
      }
  }
}

讲解：

第1步：检查新旧VNode是否是同一个对象，如果是则无需更新，直接返回。
第2步：通过isSameVNodeType判断新旧节点类型（type）和key是否相同。如果不同，说明节点已完全不同，需要卸载旧节点，并清空n1，后续会挂载新节点。
第3步：根据新VNode的type和shapeFlag进行类型分发。Vue3支持多种节点类型，每种类型都有对应的处理函数（processXxx）。这种设计使得Patch函数能够统一处理各种VNode类型，同时保持代码清晰和可扩展。

节点复用机制【原理】
节点复用是Patch函数性能优化的关键。当新旧VNode类型相同时，Patch函数不会销毁重建DOM节点，而是复用现有的真实DOM节点，仅更新发生变化的部分。

① 复用条件
判断两个VNode是否可以复用的核心函数是isSameVNodeType：
```
function isSameVNodeType(n1, n2) {
  return n1.type === n2.type && n1.key === n2.key
}
```
- type：节点的类型（如div、Component、Text等）。
- key：开发者为节点指定的唯一标识（常用于v-for列表）。
当type和key都相等时，Vue3认为这两个VNode代表同一个节点，可以复用DOM元素。

② 复用后的处理
复用DOM节点后，Patch函数会进一步比较新旧VNode的属性和子节点：
- 属性更新：通过patchProps函数对比新旧属性，只添加、移除或更新变化的属性。
- 子节点更新：递归调用patch函数处理子节点，实现最小化更新。
复用机制的意义：
DOM节点的创建和销毁是昂贵的操作。通过复用，Vue3避免了频繁的DOM创建和销毁，显著提升了渲染性能[reference:5]。

核心优化：PatchFlags【核心优化】
PatchFlags是Vue3编译阶段注入的静态标记，用于在运行时告诉Patch函数：这个VNode的哪些部分是动态的，可能发生变化。这使Patch函数能够跳过静态属性的对比，只关注动态部分[reference:6]。

① 为什么需要PatchFlags？
在Vue2中，即使节点只有一个动态属性（如:class），Patch函数仍需遍历该节点的所有属性进行对比。PatchFlags将这一过程从“全量对比”优化为“按需对比”。

② 常用PatchFlags类型
以下是源码中定义的部分PatchFlags常量及其含义[reference:7]：

标记常量	值	含义	示例
TEXT	1	文本内容动态	`<div>{{ msg }}</div>`
CLASS	2	class属性动态	`<div :class="activeCls"></div>`
STYLE	4	style属性动态	`<div :style="{ color: red }"></div>`
PROPS	8	普通props动态（如id/title）	`<div :id="boxId"></div>`
FULL_PROPS	16	props含动态键（如:key="propKey"）	`<div :[propKey]="value"></div>`
HYDRATE_EVENTS	32	节点绑定事件（仅hydration阶段用）	`<button @click="handleClick"></button>`
STABLE_FRAGMENT	64	稳定片段（子节点顺序不变）	`<template v-for="item in list" :key="item.id">`
UNKEYED_FRAGMENT	128	无key的片段（需全量diff子节点）	`<template v-for="item in list">`
NEED_PATCH	256	节点需执行patch逻辑（如组件节点）	`<MyComponent :msg="msg" />`

③ PatchFlags如何工作？
以一段模板为例：

<template>
  <div class="static-cls" :style="dynamicStyle">
    <p>{{ dynamicText }}</p>
    <button @click="handleClick">点击</button>
  </div>
</template>

编译后会生成带有patchFlag的VNode：

const vnode = {
  type: 'div',
  props: { class: 'static-cls', style: dynamicStyle },
  patchFlag: 4,  // STYLE标记：只有style是动态的
  children: [
    { type: 'p', children: dynamicText, patchFlag: 1 },  // TEXT标记
    { type: 'button', props: { onClick: handleClick }, patchFlag: 32, children: '点击' }
  ]
}

运行时，当dynamicText变化时：

根节点patchFlag为STYLE，但本次变化的是文本，因此根节点无需对比。
p节点的patchFlag为TEXT，Patch函数只对比文本内容，跳过class/style等属性。
button节点的patchFlag为HYDRATE_EVENTS，运行时无事件变化，直接跳过。
最终，Diff只聚焦于p节点的文本内容，计算量比Vue2减少80%以上[reference:8]。

核心优化：Block Tree【核心优化】
Block Tree是Vue3另一个关键的编译优化，它解决了Vue2中Diff算法需要遍历整棵树的问题。

① 核心思想
Block Tree将动态节点收集到一个数组中，在更新时只遍历这个数组，而不是整棵VNode树。这相当于为Patch函数创建了一条“快速通道”。

② Block Tree是如何工作的？
编译阶段，编译器识别出模板中的动态节点（那些可能变化的节点），并将它们收集到当前Block的dynamicChildren数组中。运行时，Patch函数会优先使用dynamicChildren数组进行更新，跳过静态节点[reference:9]。
```
// 编译后的Block结构（简化）
const block = {
  type: 'div',
  dynamicChildren: [
    { type: 'p', children: dynamicText, patchFlag: 1 },   // 动态节点
    { type: 'button', props: { onClick: handleClick }, patchFlag: 32 }
  ],
  children: [
    { type: 'h1', children: 'Static Title' },  // 静态节点，不在dynamicChildren中
    // ... 其他静态节点
  ]
}
```
优化效果：当组件重新渲染时，Patch函数只遍历dynamicChildren数组中的节点，完全跳过静态节点。这使得Diff算法的时间复杂度与动态节点数量成正比，而不是整棵树的大小。
核心优化：静态提升【核心优化】
静态提升是Vue3在编译阶段将不依赖响应式数据的静态节点提取出来，只在渲染函数外部创建一次，后续渲染直接复用。

① Vue2 vs Vue3
```
// Vue2：每次渲染都重新创建静态节点
render() {
  return createVNode("h1", null, "Hello World")
}

// Vue3：静态节点被提升为常量，只创建一次
const hoisted = createVNode("h1", null, "Hello World")
render() {
  return hoisted  // 直接复用
}
```
② 优化效果
- 减少虚拟DOM创建的开销：静态节点只创建一次。
- 减少内存分配：避免重复创建相同结构的VNode对象[reference:10][reference:11]。
核心优化：快速Diff算法【原理】
当对比两个子节点数组时，Vue3采用了快速Diff算法，通过头尾双指针和最长递增子序列来最小化节点移动[reference:12]。

① 头尾双指针对比
快速Diff算法同时使用四个指针：oldStartIdx、oldEndIdx、newStartIdx、newEndIdx，进行四种对比：
1. 旧头 vs 新头：oldStartVNode与newStartVNode
2. 旧尾 vs 新尾：oldEndVNode与newEndVNode
3. 旧头 vs 新尾：oldStartVNode与newEndVNode
4. 旧尾 vs 新头：oldEndVNode与newStartVNode
这种策略能够快速处理常见的情况，如列表头部插入、尾部插入、反转等，避免不必要的遍历[reference:13]。

② 最长递增子序列（LIS）
当无法通过头尾指针匹配时，Vue3会使用最长递增子序列算法来确定哪些节点可以保持不动，从而最小化DOM移动操作[reference:14]。

为什么使用LIS？
假设新旧两个节点序列，找到不需要移动的节点（即位置顺序不变的节点），只移动其他节点，可以大幅减少DOM操作。
性能优化的综合效果【对比】
| 优化技术 | Vue2 | Vue3 | 效果 |
|----------|------|------|------|
| Diff范围 | 全量遍历VNode树 | Block Tree + dynamicChildren | 只遍历动态节点，跳过静态节点 |
| 属性对比 | 全量对比所有属性 | PatchFlags按需对比 | 只对比变化的属性类型 |
| 静态节点 | 每次渲染重新创建 | 静态提升 | 静态节点只创建一次 |
| 列表Diff | 双端对比 | 快速Diff + LIS | 最小化DOM移动操作 |
| 时间复杂度 | O(n)（但遍历整棵树） | O(动态节点数) | 动态节点少时性能提升显著 |
面试题汇总【考点】

Q1：什么是Patch函数？它的主要作用是什么？

A：Patch函数是Vue3渲染器的核心函数，负责将虚拟DOM（VNode）转换为真实DOM，并在数据变化时高效地更新视图。它的主要作用是通过比较新旧VNode树的差异，精准地找出需要变更的节点，并执行最小化的DOM操作（创建、删除、移动、更新），从而避免整体重新渲染带来的性能损耗[reference:15][reference:16]。

Q2：Patch函数的工作流程是怎样的？

A：Patch函数的工作流程如下：
1. 如果新旧VNode相同（n1 === n2），直接返回。
2. 如果新旧VNode类型或key不同，则卸载旧节点。
3. 根据新VNode的type和shapeFlag进行类型分发，调用对应的处理函数（如processElement、processComponent等）。
4. 在处理函数中，递归调用Patch函数处理子节点。
5. 最终完成DOM的挂载或更新[reference:17][reference:18]。
Q3：Vue3中的节点复用机制是如何实现的？

A：节点复用通过isSameVNodeType函数判断：当新旧VNode的type和key都相同时，认为它们代表同一个节点。此时Patch函数会复用现有的真实DOM节点，只更新发生变化的部分（属性、子节点等），而不销毁重建。这避免了频繁的DOM创建和销毁，显著提升了渲染性能[reference:19]。

Q4：什么是PatchFlags？它如何提升性能？

A：PatchFlags是Vue3编译阶段注入的静态标记，标识VNode中哪些部分是动态的、可能发生变化。运行时，Patch函数根据PatchFlags只对比标记对应的属性，跳过静态属性。例如，一个只有style动态的节点会被标记为STYLE（值为4），更新时只对比style属性，不对比class、id等。这使得属性对比从“全量”变为“按需”，大幅减少了不必要的计算[reference:20][reference:21]。

Q5：什么是Block Tree？它与PatchFlags有什么关系？

A：Block Tree是Vue3将动态节点收集到一个数组（dynamicChildren）中的优化结构。编译时，每个Block（如组件根节点、v-if/v-for块）会收集其内部的动态节点。运行时，Patch函数优先遍历dynamicChildren数组，只更新动态节点，完全跳过静态节点。PatchFlags是“如何更新”的标记，Block Tree是“更新哪些节点”的范围界定，两者结合实现了精准高效的DOM更新[reference:22][reference:23]。

Q6：什么是静态提升？它解决了什么问题？

A：静态提升是将不依赖响应式数据的静态节点在编译阶段提取为常量，只创建一次，后续渲染直接复用。Vue2中每次渲染都会重新创建静态节点，造成不必要的内存分配和性能开销。静态提升避免了重复创建，减少了虚拟DOM创建的开销和内存占用[reference:24][reference:25]。

Q7：Vue3的快速Diff算法是如何优化列表更新的？

A：Vue3的快速Diff算法采用头尾双指针和**最长递增子序列（LIS）**进行优化。头尾双指针快速处理头部插入、尾部插入、反转等常见情况；当无法匹配时，使用LIS算法找出不需要移动的节点，只移动其他节点，最小化DOM操作。相比Vue2的diff算法，Vue3的快速Diff算法在处理复杂列表变化时效率更高[reference:26][reference:27]。

Q8：为什么说Vue3的Patch算法比Vue2更高效？

A：Vue3的Patch算法从多个维度进行了优化：
1. Diff范围缩小：Block Tree使Diff只遍历动态节点，跳过静态节点。
2. 属性对比按需：PatchFlags使属性对比只关注动态部分。
3. 节点复用增强：静态提升使静态节点只创建一次。
4. 列表Diff优化：快速Diff算法使用头尾双指针和LIS，最小化移动操作。
  这些优化综合起来，使Vue3在大型应用和频繁更新场景下的性能远超Vue2[reference:28][reference:29]。
知识点总结
- Patch函数：渲染器的核心，负责VNode到DOM的挂载和更新，通过类型分发处理不同VNode。
- 节点复用：通过type和key判断，复用DOM节点，只更新变化部分。
- PatchFlags：编译标记，标识动态属性类型，实现按需属性对比。
- Block Tree：收集动态节点到数组，限制Diff范围，跳过静态节点。
- 静态提升：将静态节点提升为常量，避免重复创建。
- 快速Diff算法：头尾双指针 + 最长递增子序列，最小化列表更新中的DOM移动。
- 综合效果：Vue3的Patch算法从“范围、内容、复用、算法”四个维度全面优化，实现了高效的DOM更新。

#框架

patch函数

http://localhost:8090/archives/patchhan-shu

作者

Administrator

发布于

2026年04月08日

许可协议

Vue 3 响应式原理：从零到一，触及灵魂上一篇

Vue 首次渲染完整流程深度解析下一篇