Vue补丁执行流程详解

Vue.js 的 Patch 函数是虚拟 DOM 高效更新的核心引擎，它并非孤立运行，而是嵌入在 render → patch → diff → DOM 操作的完整响应式更新链路中；文章深入剖析了其从组件 updateComponent 触发的入口逻辑，系统梳理了首次挂载、节点卸载、静态节点复用与常规更新四大执行路径，并揭示了 sameVnode 判断如何通过 tag、key、isComment、组件构造器和 data 存在性等五重校验决定节点是否就地复用，进而引出 patchVnode 的属性/事件精细化更新与 updateChildren 独创的双端 diff 算法——通过头尾四次比对与节点移动策略，最大限度减少真实 DOM 操作，同时点明 key 的强制替换语义、静态节点编译优化、keep-alive 影响及自定义指令钩子执行时机等易被忽视却至关重要的实践细节。

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 已更新

不复杂但容易忽略。

理论要掌握，实操不能落！以上关于《Vue补丁执行流程详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！