Vue3虚拟 DOM
Vue3 用虚拟 DOM 描述界面结构，并通过差异比较把状态变化映射到最小化的真实 DOM 更新。
#tech / dev / frame
#resource / vue3
#type / concept
#status / growing
[!info] related notes
- 所属 MOC: Vue MOC
- 上位主题: vue3
- 相关概念: vue-render-and-update-flow, vue-next-tick, vue-conditional-and-list-rendering, virtual-dom
- 学习路径: vue-learning-roadmap, vue-interview-high-frequency
Vue3虚拟 DOM
虚拟 DOM 是 Vue3 用来描述界面结构的一层中间表示。它不是为了“完全不操作 DOM”，而是为了让框架能在状态变化后更有组织地比较新旧界面，并把必要差异更新到真实 DOM。
一句话定义
虚拟 DOM 是真实 DOM 的 JavaScript 结构化描述，用来承接渲染计算和差异更新。
它解决什么问题
- 让框架先在内存里计算新旧界面差异
- 避免开发者手工管理大量 DOM 细节
- 为组件化、条件渲染、列表渲染提供统一更新模型
Vue3 更新时它处在什么位置
- 响应式状态变化
- 组件重新执行渲染逻辑
- 生成新的虚拟 DOM
- 和旧虚拟 DOM 比较差异
- 把差异应用到真实 DOM
和 React 的共同点与区别
共同点是：
- 都有虚拟 DOM 这层中间表示
- 都不会把 rerender 直接等同于真实 DOM 全量重建
更值得注意的区别是：
- Vue3 还会在编译阶段做更多静态分析和动态节点标记
- 所以它的更新效率不只是运行时 diff，还受编译优化影响
这条主线可和 vue-render-and-update-flow 一起理解。
最小理解方式
一个节点在虚拟 DOM 里可以理解成“标签名 + 属性 + 子节点”的对象化表示，而不是浏览器里的真实节点本身。
为什么 key 会影响更新结果
列表更新时，Vue 需要判断“哪个节点还是原来的那个节点”。key 提供的就是节点身份信息。
如果 key 不稳定：
- 节点可能被错误复用
- 局部状态可能错位
- 列表更新行为会更难预测
这部分可继续看 vue-conditional-and-list-rendering。
Vue3 相比旧思路更值得注意的点
- Vue3 仍然使用虚拟 DOM 作为通用更新模型
- 同时也在编译阶段做了更多静态分析和动态节点标记
- 所以性能不只来自 diff，本质是“编译优化 + 运行时更新模型”共同作用
常见误解
虚拟 DOM 不等于完全更快
它的价值是提供统一、可预测的更新模型，而不是任何场景都绝对更快。
虚拟 DOM 不等于每次整树重建
状态变化后会重新计算渲染结果，但真实 DOM 更新通常只落在差异部分。
理解虚拟 DOM 不能脱离更新流程
单独背“diff 算法”意义不大，更重要的是把它放回 vue-render-and-update-flow 的主线里看。
最短记忆方式
虚拟 DOM 是 Vue 在“状态变化”和“真实 DOM 更新”之间的中间层。