聊聊什么是虚拟dom？vue为什么采用vdom？
2026-10-25 23:30:54
虚拟 DOM（VDOM）是真实 DOM 的抽象表示，本质是一个 JavaScript 对象，通过属性（如标签名、子节点、属性键值对等）描述视图结构。例如，一个 <div> 元素会被抽象为包含 type: 'div'、children 等属性的对象。这种设计将视图与真实 DOM 解耦，为后续优化提供了基础。
Vue 采用 VDOM 的核心原因包括性能优化与架构解耦，具体体现在以下层面：
性能优化层面
直接操作真实 DOM 的代价高昂：真实 DOM 节点包含大量属性（如事件监听、样式计算等），直接进行 diff 或 clone 操作需遍历所有内容，效率低下。而 VDOM 将这些操作转移到内存中的 JavaScript 对象，通过算法（如 Vue 的 patch 算法）高效对比新旧 VDOM 差异，仅更新变化部分，减少不必要的真实 DOM 操作。此外，频繁操作真实 DOM 会触发浏览器重绘与回流，而 VDOM 通过批量处理差异，将多次 DOM 操作合并为一次，显著降低性能损耗。
架构解耦与跨平台能力
VDOM 使 Vue 摆脱了对 HTML 解析器的依赖。传统框架需依赖浏览器解析 HTML 模板，而 Vue 通过编译器将模板编译为渲染函数，生成 VDOM。这一过程支持 AOT（提前编译），可在构建阶段优化代码，减少运行时体积并提升效率。更重要的是，VDOM 作为抽象层，使同一套逻辑可渲染到不同平台：例如在浏览器中生成 DOM 元素，在 Native 环境（iOS/Android）映射为原生控件，或支持 SSR（服务端渲染）、小程序（如 uni-app）、WebGL 等场景。Vue 3 还允许开发者基于 VDOM 实现自定义渲染器，进一步扩展渲染目标。
高级特性支持
VDOM 的抽象能力为 Vue 提供了现代框架所需的高级特性。例如，通过对比新旧 VDOM 的差异，Vue 能精准定位需要更新的 DOM 节点，实现高效的数据驱动视图更新；结合响应式系统，当数据变化时，仅重新生成受影响部分的 VDOM，而非全量渲染。这种机制在复杂应用中优势显著，尤其在动态内容频繁更新的场景下，性能提升更为明显。
生成与转换流程
Vue 中，模板（template）首先被编译器转换为渲染函数，调用时返回 VDOM 对象。在挂载阶段，VDOM 通过 patch 过程递归转换为真实 DOM；更新时，新数据触发重新渲染生成新 VDOM，与旧 VDOM 对比后，仅对差异部分操作真实 DOM。这一流程确保了视图更新的高效性与准确性。
热门标签
