虚拟 DOM 是 Vue 跨端能力的底层基石，因其将渲染逻辑抽离为平台无关的 vnode 描述，配合解耦的响应式系统、标准化编译器输出及内存中运行的 diff 算法，使同一套代码可通过不同 renderer 适配 Web/Weex/小程序等多端。
虚拟 DOM 是 Vue 跨端能力的底层基石，不是因为它“看起来像 DOM”，而是因为它把真实平台的渲染逻辑彻底抽离了。
虚拟 DOM 本质是平台无关的渲染描述
Vue 的 vnode（虚拟节点）是一个纯 JavaScript 对象，只描述“要渲染什么”：标签名、属性、子节点、指令、事件等，不依赖任何浏览器 API。它不操作 document.createElement，也不关心 appendChild 怎么执行——这些都交给平台特定的“渲染器”去实现。
比如同一个 <view><text>Hello</text></view> 模板，在不同环境会生成结构一致的 vnode，但最终渲染行为由不同 renderer 决定：
- Web 端 → 调用 DOM API 创建真实元素
- Weex → 调用原生容器提供的 createView 接口
- 小程序 → 映射为
view和text组件 JSON 描述，交由微信/支付宝渲染引擎处理
响应式系统与虚拟 DOM 解耦，支撑多端一致性
Vue 的响应式（ref/reactive）只负责追踪数据变化并触发更新函数，它完全不知道“更新后要画到哪”。这个“画”的动作，由 render 函数 → 生成 vnode → renderer 执行挂载/打补丁 这条链完成。
立即学习“前端免费学习笔记（深入）”；
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
这意味着：
- 同一套响应式数据 + 同一套模板语法，可复用于任意 renderer
- Weex 和小程序只需实现自己的 renderer（含 diff 算法和节点创建/更新逻辑），无需重写响应式或编译器
- 开发者写的
v-if、v-for、@click在各端语义一致，因为它们最终都编译成 vnode 描述，再由对应平台解释执行
编译器输出标准化，为跨端提供统一输入
Vue 的模板编译器（@vue/compiler-core）不直接生成平台代码，而是统一产出可序列化的 vnode 创建函数（render()）。这个函数本身是平台中立的——它返回 vnode，不调用任何平台 API。
跨端框架正是利用这一点：
- Weex 使用
@vue/runtime-weex替换默认 runtime，接管 vnode 渲染流程 - uni-app 或 taro 等工具，在编译阶段将 Vue SFC 转为小程序 WXML + JS 逻辑，其转换依据正是 vnode 的结构语义（如 element type 判定为 view/text，props 映射为 bindtap/class/style）
- 甚至可以将 vnode 序列化为 JSON，传给 Flutter 或 React Native 渲染层做二次解析
Diff 算法运行在内存中，屏蔽底层差异
Vue 的 patch 过程（diff + 更新）全程在 JavaScript 引擎内完成，只比对 vnode 树的逻辑结构（key、type、props、children），不涉及真实节点操作。这使得：
- 无论目标平台是 DOM、原生视图树还是 JSON 配置，只要 renderer 能根据 vnode 类型创建/更新对应载体，diff 就能正常工作
- 跨端时无需修改响应式触发逻辑或组件生命周期，仅需保证 renderer 正确实现
mount、patchProp、insert等钩子 - 性能优化（如静态提升、block tree）也天然适用于所有平台，因为它们作用于 vnode 层，而非渲染结果层
没有虚拟 DOM，跨端就得为每个平台重写整套模板解释器和状态驱动逻辑；有了它，Vue 只需维护一套核心（响应式 + 编译器 + diff），其余交给平台适配层——这才是真正意义上的“一次开发，多端运行”的技术支点。
