⚡ 30 秒速记
- 核心判断：虚拟节点是对界面结构的描述，渲染器通过挂载与更新把声明式描述映射为宿主环境操作
- 原理主线：围绕 「一、前言」、「二、为什么要说这个 diff 算法？」、「三、虚拟 dom 的 diff 算法」 建立输入、状态变化与输出之间的因果关系
- 文章范围：解析Vue中的Diff算法，包括虚拟DOM的工作原理、Diff算法的复杂度、核心流程、与snabbdom的关系及Vue2.x和Vue3.x的差异，帮助读者全面理解前端框架中的高效DOM更新机制。
- 边界与代价：
key、节点类型和稳定序列决定复用边界；虚拟 DOM 解决可预测更新，不保证永远比手写 DOM 快 - 工程落地：性能分析要看实际提交次数、节点移动和组件边界，不能只用“减少 DOM 操作”解释
diff 的本质是比较新旧虚拟节点，并通过 patch 只更新真实 DOM 中发生变化的部分。 为把复杂度控制在 O(n)，框架通常只比较同层节点，不尝试识别跨层移动。Vue 2 的核心是 patchVnode 和 updateChildren，会结合节点类型与 key 判断复用、移动、创建或删除。虚拟 DOM 不保证每次操作都最优，但在渲染效率、跨平台能力和可维护性之间更均衡。
这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。
版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。
# 一、前言
有同学问：能否详细说一下 diff 算法。
简单说：diff 算法是一种优化手段，将前后两个模块进行差异化比较，修补(更新)差异的过程叫做 patch，也叫打补丁。
详细的说，请阅读这篇文章，有疑问的地方欢迎联系「松宝写代码」一起讨论。
文章主要解决的问题：
- 1、为什么要说这个 diff 算法？
- 2、虚拟 dom 的 diff 算法
- 3、为什么使用虚拟 dom？
- 4、diff 算法的复杂度和特点？
- 5、vue 的模板文件是如何被编译渲染的？
- 6、vue2.x 和 vue3.x 中的 diff 有区别吗
- 7、diff 算法的源头 snabbdom 算法
- 8、diff 算法与 snabbdom 算法的差异地方？
# 二、为什么要说这个 diff 算法？
因为 diff 算法是 vue2.x ， vue3.x 以及 react 中关键核心点，理解 diff 算法，更有助于理解各个框架本质。
说到「diff 算法」，不得不说「虚拟 Dom」，因为这两个息息相关。
