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 就只做“该改的”：
- 对比并更新 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，不可复用则替换成新结构”的统一原则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
