Vue3 的 diff 算法是其性能优化的核心环节之一，在 Vue2 基础上进行了深度重构，结合编译时优化（PatchFlags）和运行时高效比对策略，大幅提升了虚拟 DOM 更新的效率。以下从设计理念、核心流程、优化点及与 Vue2 的差异等方面详细解析。

一、设计理念：“编译时标记 + 运行时靶向更新”

Vue3 的 diff 算法不再采用 Vue2 中 “全量比对” 的策略，而是通过 编译时静态分析 与 运行时精准比对 结合，实现 “按需更新”：

• 编译时：编译器（@vue/compiler-core）为动态节点添加 PatchFlags（补丁标记），标记节点的更新依赖（如仅文本变化、仅属性变化等）。
• 运行时：diff 算法根据 PatchFlags 跳过无需更新的节点，仅对标记的动态部分进行比对，减少无效计算。

二、核心概念：虚拟 DOM 与 PatchFlags

1. 虚拟 DOM（VNode）结构

Vue3 的虚拟 DOM 节点（VNode）是对真实 DOM 的轻量描述，核心属性包括：

typescript

interface VNode {
  type: string | Component; // 节点类型（标签名或组件）
  props: Record<string, any> | null; // 属性/ props
  children: VNode[] | string | null; // 子节点
  patchFlag: number; // 补丁标记（关键优化点）
  dynamicProps?: string[]; // 动态属性列表（如 :class、:style）
  // 其他属性：key、el、shapeFlag 等
}

2. PatchFlags（补丁标记）

PatchFlags 是编译时为动态节点添加的二进制标记，用于标识节点的更新维度。常见标记如下：

标记值	含义	场景示例
TEXT（1）	节点文本内容动态变化	<div>{{ msg }}</div>
PROPS（2）	节点属性动态变化（需配合 dynamicProps）	<div :id="id" :class="cls"></div>
CLASS（4）	仅 class 属性动态变化	<div :class="cls"></div>
STYLE（8）	仅 style 属性动态变化	<div :style="style"></div>
HYDRATE_EVENTS（16）	需在服务端渲染时绑定事件	<button @click="handleClick"></button>
STATIC（-1）	静态节点（永不更新）	<div>静态文本</div>

一个节点可同时拥有多个标记（通过按位或 | 组合），例如 <div :class="cls">{{ msg }}</div> 会被标记为 CLASS | TEXT（值为 5），表示该节点仅可能因 class 或文本变化而更新。

三、diff 算法核心流程

Vue3 的 diff 算法主要通过 patch 函数实现，核心逻辑是比对新旧虚拟 DOM 节点（n1 为旧节点，n2 为新节点），并更新真实 DOM。流程可分为 节点类型判断 和 子节点比对 两大阶段。

阶段 1：节点类型判断（快速路径）

首先判断新旧节点的 type 是否相同：

• 不同类型：直接卸载旧节点（unmount(n1)），并挂载新节点（mount(n2)），无需深入比对。
• 相同类型：进入属性更新和子节点比对阶段。

阶段 2：相同类型节点的更新

（1）属性更新（基于 PatchFlags）

若节点存在 patchFlag，则根据标记精准更新属性，跳过无关检查：

• 若标记包含 TEXT：直接更新节点文本内容（el.textContent = n2.children）。
• 若标记包含 CLASS：仅更新 class 属性（el.className = n2.props.class）。
• 若标记包含 PROPS：结合 dynamicProps 数组，仅更新动态属性（如 id、src 等），忽略静态属性。
• 若标记为 STATIC：直接跳过（静态节点无需更新）。

示例：旧节点 n1 和新节点 n2 均为 <div :class="cls">{{ msg }}</div>，标记为 CLASS | TEXT。更新时仅需：

1. 比对 class 属性，若变化则更新 el.className。
2. 比对文本内容，若变化则更新 el.textContent。无需检查其他属性（如 id、style 等静态属性），大幅减少计算量。

（2）子节点比对（核心难点）

当节点包含子节点（children）时，需比对子节点列表。Vue3 根据子节点的类型（文本、数组、空）和是否有 key，采用不同的比对策略，核心优化是 利用 key 快速定位可复用节点 和 通过最长递增子序列减少节点移动。

子节点比对的常见场景及处理逻辑：

• 场景 1：新旧子节点均为文本直接更新文本内容（el.textContent = n2.children）。

• 场景 2：旧子节点为数组，新子节点为文本卸载所有旧子节点（unmount），更新文本内容。

• 场景 3：新旧子节点均为数组（核心逻辑）此时需对两个数组进行比对，步骤如下：

  1. 同步前置节点：从头部开始，比对具有相同 key 和 type 的节点，直接更新可复用节点，直到遇到不匹配的节点。
  2. 同步后置节点：从尾部开始，同上处理，减少中间区域的比对范围。
  3. 处理剩余节点：
     • 若新节点列表有剩余（需新增节点）：创建并插入新节点。
     • 若旧节点列表有剩余（需删除节点）：卸载剩余旧节点。
     • 若两者均有剩余（需移动 / 更新节点）：
       • 构建旧节点 key 到索引的映射（keyToOldIndex），快速查找新节点在旧列表中的位置。
       • 遍历新节点列表，通过 keyToOldIndex 定位旧节点：
         • 若找到可复用节点（key 和 type 匹配）：更新节点并记录位置。
         • 若未找到：创建新节点。
       • 计算 “最长递增子序列”（LIS）：根据节点在旧列表中的位置，找到无需移动的节点序列，其余节点按顺序插入，减少 DOM 移动操作（DOM 移动是高开销操作）。

  示例：旧子节点：[A, B, C, D]（key 分别为 1、2、3、4）新子节点：[B, A, D, E]（key 分别为 2、1、4、5）处理后：B 和 A 移动位置，D 保留，C 卸载，E 新增。通过 LIS 算法可确定 D 无需移动，减少移动次数。

四、与 Vue2 diff 算法的核心差异

维度	Vue2 diff 算法	Vue3 diff 算法
优化基础	纯运行时比对，无编译时信息	编译时 PatchFlags + 运行时精准比对
静态节点处理	全量比对，无跳过	标记 STATIC，直接跳过比对
动态节点比对	全量检查所有属性和子节点	根据 PatchFlags 仅检查变化维度
子节点比对效率	双指针遍历，移动逻辑较简单	结合 key 映射 + 最长递增子序列，减少移动
时间复杂度	最坏 O (n²)（无 key 时）	平均 O (n)（有 key 时）

五、性能优势总结

1. 减少无效比对：通过 PatchFlags 跳过静态节点和无关动态属性，避免 Vue2 中 “全量扫描” 的开销。
2. 优化子节点移动：最长递增子序列算法大幅减少 DOM 节点的移动次数（DOM 操作是性能瓶颈）。
3. 针对性处理场景：对文本、数组等不同类型子节点采用专用逻辑，提升特殊场景效率。

这些优化使得 Vue3 的 diff 算法在大型应用中性能提升显著，尤其在动态内容较多的场景下，更新速度比 Vue2 快 50% 以上。