第 4 章 虚拟 DOM 与补丁

第 4 章 · 虚拟 DOM 与补丁

章节摘要：渲染管线的第三站。渲染函数产出虚拟 DOM——一棵轻量的 JavaScript 对象树，新旧两棵树的差异由 diff 算法找出，再以补丁形式应用到真实 DOM。本章拆解 vnode 结构、同层比较策略与 key 的作用，这是全册性能话题的理论地基。

学习目标

阅读完本章，你应当能够：

1. 写出一个最小 vnode 结构并解释各字段在 diff 中的用途；
2. 说明为什么"同层比较 + 深度优先"的启发式策略在实践中够用；
3. 从 diff 源码逻辑推演出"索引 key 导致复用错位"的完整因果链；
4. 区分 Vue 2 的双端比较与 Vue 3 的最长递增子序列两种列表比对策略。

核心概念速览

虚拟 DOM 的价值不在于"比直接操作快"，而在于用可计算的 diff 换掉手写的同步逻辑，顺带获得跨端能力。

子章节导航

4.1 虚拟 DOM 与 diff 算法

vnode 的真实结构、patch 的分支逻辑、同层策略的来龙去脉。

4.2 key 与列表渲染的复用机制

key 在 diff 配对中的身份作用，索引 key 的三类事故现场，以及 Vue 3 的子序列优化。

子章节之间的逻辑关系

4.1 讲单节点与树的比对，4.2 聚焦其中最复杂也最容易出错的子列表比对。后者是前者结论在"批量兄弟节点"场景的深化。

patch vnode
  ├─ 标签不同 → 替换（4.1）
  └─ 标签相同 → 比属性、比孩子
        └─ 孩子是列表 → key 配对（4.2，事故高发区）
​

前置知识与后续延伸

• 前置：第 3 章的渲染函数产物（新虚拟树正是它每次执行的输出）；
• 为后续铺路：第 9 章全部性能手段（keep-alive、v-memo、虚拟列表）都在减少本章环节的工作量；第 10 章 Vue 3 的补丁标志是对本章 diff 的编译期加速。

一个常见的学习误区提前打个预防针：不少初学者把虚拟 DOM 理解成"性能优化技术"，于是得出"Vue 比 jQuery 快"的错误结论，进而在技术选型时给出经不起追问的理由。正确的理解是把虚拟 DOM 看成一种工程契约——用声明式描述换掉命令式同步，性能只是这个契约在设计权衡后的副产物。带着这个定位读 4.1 的"祛魅"小节，你会发现后续理解 Solid、Svelte 等无虚拟 DOM 框架的取舍也顺理成章。