为什么要引入虚拟 DOM
2025年6月26日大约 3 分钟
为什么要引入虚拟 DOM
什么是虚拟 DOM
虚拟 DOM（Virtual DOM）是对真实 DOM 的结构化抽象。框架先使用 JavaScript 对象描述 UI 状态，再由渲染器将这棵对象树映射到真实宿主环境（浏览器 DOM、原生视图等）。
为什么要使用虚拟 DOM
Vue、React 等主流前端框架都采用虚拟 DOM 作为运行时核心机制，其价值并不只是“更快”，更关键是提高渲染过程的可控性与可维护性。
框架设计视角
在数据驱动模型下，状态变化通常发生在组件维度，而不是精确到某个具体 DOM 节点。若每次状态更新都直接手工操作真实 DOM，复杂页面会很快进入高耦合和难维护状态。
虚拟 DOM 的作用是把“状态变化”转换为“新旧虚拟树差异”，再由 diff 与 patch 流程生成最小化的真实 DOM 更新集合。这样可以把开发关注点稳定在状态建模和组件边界，而不是零散的 DOM 指令。
需要强调的是：虚拟 DOM 不是完全避免 DOM 操作，而是减少低价值、重复性的 DOM 操作，并统一更新路径。
跨平台与渲染解耦
虚拟 DOM 本质是 UI 描述层，它将“业务状态表达”与“平台渲染细节”解耦。框架可以在上层复用组件逻辑，在下层替换不同渲染器实现，从而支持 Web、Native、SSR 等多种运行环境。
这种分层设计在工程实践中的意义是：可迁移性更高、渲染策略可演进、测试与调优边界更清晰。
背景
「为什么要引入虚拟 DOM」属于框架机制类主题，价值在于指导实际架构决策，而不是停留在 API 对比。
核心原理
建议从三层理解框架：编译期生成什么、运行时如何调度、更新阶段如何控制复杂度。
实现方式 / 示例
把机制映射到业务问题：组件粒度划分、状态归属边界、列表更新策略、异步渲染时机。
常见问题
- 只讨论语法差异，忽略调度模型差异。
- 性能问题归因笼统，缺少可观测数据。
- 对比结论缺乏适用场景，难以指导选型。
最佳实践
对每个结论补充“适用场景、成本、替代方案”，把知识沉淀为可执行的选型标准。
总结
围绕「为什么要引入虚拟 DOM」的关键是把框架认知转化为工程决策能力。