Vue虚拟DOM采用分层设计，根本原因在于实现关注点分离与平台可移植性：core层专注响应式、VNode抽象和diff算法等纯逻辑，不依赖平台；runtime-dom层负责浏览器中真实DOM操作，二者通过标准接口协作，支撑跨平台渲染、测试友好、按需打包与灵活演进。
Vue 的虚拟 DOM 体系采用分层设计，根本原因在于实现“关注点分离”与“平台可移植性”——它不是把所有功能揉进一个大模块，而是让核心逻辑（core）专注响应式、更新调度和 VNode 抽象，把平台相关操作（如浏览器 DOM 渲染）下沉到 runtime-dom 层。这种解耦不是为了炫技，而是为了解决真实工程问题。
core 层只管“状态怎么变、树怎么比”
Vue 的 @vue/runtime-core 是纯逻辑层，不依赖任何平台环境。它定义了：
- VNode 的基本结构（tag、props、children、key 等字段），但不规定如何挂载或更新
- 组件实例生命周期、响应式依赖收集与触发机制
- 渲染器通用接口（
renderer），比如createApp、render、hydrate都是抽象签名，不涉及具体 DOM 操作 - diff 算法主干（patch、patchChildren、processElement 等），只做节点对比和补丁生成，不执行真实 DOM 修改
runtime-dom 负责“在浏览器里怎么画出来”
@vue/runtime-dom 是 core 的一个具体实现，专用于浏览器环境。它：
- 提供
createElement、createText、insert、remove、setElementText等底层 DOM 操作封装 - 将 core 中的 patch 补丁映射为真实的 DOM 增删改查（例如：PROPS 类型补丁 →
el.setAttribute；REPLACE →parentNode.replaceChild） - 处理事件绑定（
v-on）、ref 注入、SSR hydration 等浏览器特有行为 - 复用 core 的 diff 结果，但自己决定何时、如何批量提交到真实 DOM（比如利用
queueJob+nextTick实现异步更新）
解耦带来的实际好处
这种分层不是理论空谈，直接支撑了 Vue 的关键能力：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
-
跨平台渲染：同一套 core 可搭配
@vue/runtime-mp-weixin（小程序）、@vue/runtime-canvas（Canvas 渲染）、@vue/runtime-node（服务端渲染），只需重写平台操作部分 - 测试友好：core 层可完全在 Node.js 中单元测试，无需模拟 DOM；runtime-dom 则可单独做端到端 DOM 行为验证
- 按需打包：构建工具能静态分析，只引入当前目标平台的 runtime（比如 CLI 构建 H5 时不会打包小程序 runtime）
- 演进灵活：Vue3 的 Proxy 响应式替换 Object.defineProperty、diff 算法从双端改为快速 Diff，都只影响 core 或 runtime 内部，不影响对方接口
一个典型调用链说明分层协作
当调用 app.mount('#app') 时：
- core 的
createApp创建应用上下文，注册组件、指令等，但不碰 DOM - runtime-dom 的
mount接收 root component 和容器选择器，调用 core 的render生成初始 VNode - runtime-dom 的
patch函数被传入，负责把 VNode 树首次渲染为真实 DOM 节点 - 后续数据变化触发 core 的更新队列，最终仍由 runtime-dom 的
patch执行差异更新
本质上，core 是“怎么想”，runtime-dom 是“怎么做”。两者通过清晰的契约（VNode 格式、renderer 接口、生命周期钩子）协作，而不是强耦合。这正是 Vue 能兼顾开发体验与工程扩展性的底层根基。
