Vue 3 的 Patch 过程采用“先判类型、再分场景、最后精准更新”三层逻辑：首先通过 sameVNode 判断节点可复用性（要求 type、key、基础类型等一致），接着差异化更新属性与文本，对静态节点跳过 diff；子节点 Diff 使用双端预处理+哈希映射+LIS 算法实现最小 DOM 操作；最后按 shapeFlag 调度 text、element、component 等不同类型处理流程。
Vue 3 的 Patch 过程不是逐层暴力比对整棵树，而是靠“先判类型、再分场景、最后精准更新”三层逻辑来高效识别差异。
判断节点是否可复用（sameVNode）
这是 Patch 的第一道闸门。只有新旧 VNode 满足以下条件，才会进入复用流程，否则直接卸载旧节点、挂载新节点：
- 标签名（type）相同，比如都是
div或都是组件类型 - key 值完全一致（
null与undefined视为不同） - 是否为注释节点、文本节点等基础类型一致
- 作用域插槽 ID、异步组件状态等元信息匹配（在某些优化场景下参与判断）
这个判断封装在 sameVNode() 中，是后续所有精细化操作的前提。
属性与内容的差异化更新
一旦确认可复用，Patch 就只做“该改的”：
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 对比并更新 class、style、props、事件监听器（如
@click）——只替换变更项，不全量重写 - 文本节点：仅当
n1.children !== n2.children时才调用el.textContent = newContent - 静态节点（
Static类型）跳过 diff，直接复用 DOM —— 编译阶段已标记，运行时零开销
子节点 Diff：从双端到 LIS 的智能映射
子节点更新是 Patch 最复杂的部分，Vue 3 采用“快速 Diff”算法，分三步走：
- 前后缀预处理：先从头和尾同步比对相同 key 的节点，直接复用或跳过
- 收集剩余节点：把未匹配的旧节点按 key 建哈希表，新节点转为数组并记录索引
- LIS 计算最小移动序列：基于新节点顺序，在旧节点中找最长递增子序列，从而推导出最优的插入、移动、删除操作组合
例如列表从 [A,B,C,D] 变为 [D,A,B,E]，算法能准确识别 D 是移动、C 是删除、E 是新增，全程仅三次 DOM 操作。
按节点类型调度不同处理流程
Patch 函数本身是调度中心，根据 shapeFlag 位运算结果选择执行路径：
-
Text→processText()：创建或更新文本节点 -
Element→processElement()：处理普通 HTML 元素（含属性、子节点 diff） -
Component→processComponent()：触发组件实例的更新或挂载逻辑 -
Fragment→processFragment()：遍历多根节点，逐个 patch 子 vnode
每种类型内部都遵循“可复用则 patch，不可复用则替换成新结构”的统一原则。
