VNode 是平台无关的轻量级 JavaScript 对象，仅描述节点类型、属性、子节点等语义信息；Vue 通过可插拔的渲染器将同一 VNode 树适配到 Web、小程序、Native 等不同平台，实现跨端复用。
Vue.js 的 VNode（虚拟节点）本质是描述真实 DOM 结构的轻量级 JavaScript 对象，它本身不直接操作平台 UI，而是作为“声明意图”的中间表示层。这种设计让 Vue 能在不修改用户模板语法的前提下，将同一份 <template> 编译为不同目标平台的渲染指令——不是靠“兼容”，而是靠“解耦 + 可替换的渲染器”。
VNode 是平台无关的抽象描述
VNode 不包含任何 DOM API 调用或浏览器特有逻辑，只定义节点类型（如元素、组件、文本）、属性（props、attrs）、子节点（children）、关键标识（key）等语义信息。它的结构是纯数据化的，例如：
{
type: 'div',
props: { id: 'app', class: 'container' },
children: [
{ type: 'span', children: 'Hello' }
]
}
这个对象既可被浏览器渲染器转为真实 DOM，也可被小程序渲染器转为 WXML 节点，或被 Native 渲染器转为原生视图组件。
核心在于可插拔的渲染器（Renderer）
Vue 运行时把编译后的 VNode 树交给对应的 Renderer 处理。不同端只需实现自己的 createApp、patch（diff & 更新）、hostCreateElement 等宿主接口：
立即学习“前端免费学习笔记（深入）”；
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- Web 平台：调用
document.createElement、el.setAttribute等 DOM API - 小程序：映射为
view、text等 WXML 标签，并通过 setData 驱动更新 - Native（如 Weex 或 Vue Native）：创建对应平台的原生 View/TextView 实例
用户写的组件和模板完全不变，变的只是底层 renderer 的实现。
组件系统与生命周期保持一致，屏蔽平台差异
Vue 的组件抽象（setup / render 函数、响应式系统、provide/inject、v-model 等）全部运行在 JavaScript 层，与 UI 渲染解耦。VNode 作为组件 render 函数的返回值，天然承载了跨端能力。生命周期钩子（如 mounted、updated）由 renderer 在合适时机触发，对上层无感知平台细节。
例如一个使用 v-if 和 v-for 的列表组件，在 Web 上生成 DOM 片段，在小程序中生成 WXML 列表节点，在 Native 中生成 RecyclerView/ListView 子项——所有逻辑复用，仅渲染输出不同。
自定义渲染器是扩展的关键入口
Vue 3 提供了 createRenderer 工厂函数，允许开发者传入宿主配置（host config），定制化构建 renderer：
- 指定如何创建/插入/移除节点（
hostCreateElement,hostInsert） - 定义属性设置规则（
hostPatchProp，比如小程序中 class 写成className） - 处理事件绑定（
hostAddEventListener，如小程序用bindtap替代click）
这意味着只要实现一套符合规范的 host 接口，就能让 Vue 应用跑在任意具备 JS 运行环境和视图操作能力的平台上。
