Vue.js 的 Patch 函数是虚拟 DOM 渲染核心，负责新旧 VNode 对比与 DOM 高效更新；其入口为组件 updateComponent 触发的 vm._update(vm._render(), hydrating)，依 prevVnode 是否为空、vnode 是否为空、是否静态且 key 相同、或常规更新四路径执行 createElm、removeVnodes 或 sameVnode 判断后 patchVnode 与 updateChildren。
Vue.js 的 Patch 函数（即 patch）是虚拟 DOM 渲染系统的核心，负责将新旧 VNode 进行比对，并高效更新真实 DOM。它不是独立运行的，而是由 render → patch → diff → DOM 操作 这一链条驱动，入口在组件更新时的 updateComponent 调用中触发。
patch 函数的调用入口：从组件更新开始
当响应式数据变化触发依赖通知时，组件的 watcher 会执行 updateComponent 方法，该方法内部调用：
vm._update(vm._render(), hydrating)-
_render()返回新的 VNode，_update()则调用vm.__patch__(prevVnode, vnode) - 首次挂载时，
prevVnode为null，直接执行createElm创建整个 DOM 树 - 后续更新时，进入核心 diff 流程，调用
patchVnode和updateChildren
patch 的核心逻辑分支：四种典型场景
源码中 patch 函数开头即做关键判断，决定走哪条路径：
-
旧节点为空（首次挂载）：直接
createElm(vnode, inserting)，递归创建所有子节点 DOM -
新节点为空（卸载）：调用
removeVnodes([oldVnode], 0, 0)销毁旧 DOM 及绑定的事件、指令等 -
新旧节点均为静态且 key 相同：复用旧 DOM，跳过 diff（
vnode.isStatic && vnode.key === oldVnode.key） -
常规更新（最常见）：先执行
sameVnode(oldVnode, vnode)判断是否可复用节点，再进入patchVnode
sameVnode 判断：复用的前提条件
只有满足以下全部条件，Vue 才认为两个 VNode 可以就地复用（避免移动/重建）：
立即学习“前端免费学习笔记（深入）”；
- 标签名（
tag）相同 - 是否为注释节点（
isComment）一致 - 是否具有相同
key值（key !== undefined且相等） - 是否为同一组件（
sameConstructor或asyncFactory匹配） - 数据属性（
data）存在性一致（都为 null 或都不为 null）
不满足则视为“节点不可复用”，直接销毁旧节点 + 新建节点（createElm + removeVnodes）。
patchVnode 与 updateChildren：子节点更新的关键
当 sameVnode 为 true 后，进入 patchVnode，主要做三件事：
-
属性/指令/事件更新：调用
updateAttrs、updateClass、updateDOMListeners等模块钩子 -
文本节点处理：若新旧都是文本节点（
vnode.text !== undefined），直接更新el.textContent -
子节点比对：若存在子节点，则调用
updateChildren—— Vue 的双端 diff 算法所在
updateChildren 使用“头-头、尾-尾、尾-头、头-尾”四次比对，配合 moveVnode 移动已存在的节点，最小化 DOM 操作次数。
注意事项与易忽略细节
理解 patch 过程需注意几个实践级要点：
- key 的作用不仅是 diff 优化，更是强制替换的信号：key 不同时即使 tag 相同也走 replace 分支
-
静态节点（
static）在编译阶段被标记，diff 中完全跳过，提升性能 -
组件节点 patch 会触发子组件的 $forceUpdate 或重新 render，但受
keep-alive等影响 -
自定义指令的
update钩子，在 patchVnode 阶段被调用，此时新旧binding已更新
不复杂但容易忽略。
