⚡ 30 秒速记
- 核心判断：虚拟节点是对界面结构的描述，渲染器通过挂载与更新把声明式描述映射为宿主环境操作
- 原理主线：围绕 「什么是 Virtual DOM」、「为什么使用 Virtual DOM」、「虚拟 DOM 的作用」 建立输入、状态变化与输出之间的因果关系
- 文章范围：介绍了虚拟DOM的原理、作用及其在提升前端渲染性能、简化DOM操作、实现视图与状态同步等方面的优势，并对主流Virtual DOM库进行了简要说明，适合前端开发者深入理解虚拟DOM技术。
- 边界与代价：
key、节点类型和稳定序列决定复用边界；虚拟 DOM 解决可预测更新，不保证永远比手写 DOM 快 - 工程落地：性能分析要看实际提交次数、节点移动和组件边界，不能只用“减少 DOM 操作”解释
虚拟 DOM 本质上是用普通 JavaScript 对象描述界面结构，再通过前后状态对比更新真实 DOM。 状态变化时，框架先生成新的虚拟树，与上一次结果做 diff，然后只执行必要的宿主环境操作。这样既能维护视图与状态的关系，也能减少复杂场景下手动操作 DOM 的负担。它还可用于 SSR、原生应用和小程序，但具体实现会随框架版本变化，落地前要先确认版本与项目约束。
这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。
版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。
# 什么是 Virtual DOM
Virtual DOM(虚拟 DOM)，是由普通的JS对象来描述DOM对象，因为不是真实的DOM对象，所以叫Virtual DOM
