Vue跨平台渲染核心在于虚拟DOM作为平台无关UI描述协议，通过可替换渲染器与宿主接口实现多端适配。VNode仅含type、props、children三类信息，不依赖DOM；runtime-core负责通用逻辑，Renderer执行平台特定操作；只需实现约10个宿主函数即可接入新平台。
Vue.js 虚拟 DOM 实现跨平台渲染，核心不在“模拟 DOM”，而在于建立了一套与平台无关的 UI 描述协议和可替换的执行层。
虚拟 DOM 是统一的中间表示（IR）
它不是浏览器专属的数据结构，而是一个轻量、纯 JavaScript 的对象树（VNode），只保留三类关键信息：
-
type：节点类型，可以是字符串（如
'div'）、组件定义函数或内置组件标识 - props：属性与事件，其中事件是普通函数引用，不绑定具体平台 API
-
children：子节点列表，支持文本、数组、嵌套 VNode，甚至为
null或undefined
这个结构不依赖 DOM 接口、不持有真实节点引用、可序列化、可传输，因此天然适配服务端、Canvas、终端、原生控件等任意目标环境。
渲染器解耦了“描述”与“执行”
Vue 的 runtime-core 只负责通用逻辑：响应式追踪、VNode 创建、diff 比对、更新调度。真正把 VNode 落地为视图的操作，由外部传入的渲染器（Renderer）完成。
立即学习“前端免费学习笔记（深入）”；
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- Web 渲染器调用
document.createElement、el.setAttribute等 DOM API - Canvas 渲染器维护画布上下文
ctx，将<button>映射为ctx.fillRect()+ctx.fillText() - 小程序或 Weex 渲染器则对接各自的原生视图创建与布局系统
所有平台共用同一套 diff 和 patch 流程，仅在“打补丁”阶段调用各自实现的宿主方法（host functions）。
宿主接口（Host Interface）定义平台能力契约
Vue 通过一个配置对象 RendererOptions 注入平台能力，约 10 个关键函数构成最小契约：
-
createElement：生成平台原生节点（DOM 元素 / 原生控件 / 绘图指令） -
patchProp：按平台语义更新属性（如 Web 设置style，Canvas 更新绘图参数） -
insert、remove、setElementText等：控制节点生命周期与内容
只要实现这些函数，就能接入 Vue 核心渲染流程——无需修改响应式系统，也不影响组件写法。
跨平台不靠条件判断，靠运行时切换
组件代码保持标准 Vue 语法（template 或 setup），不直接调用 document 或 ctx。构建或启动时，通过不同入口加载对应渲染器：
- Web 版：
import { createApp } from 'vue'→ 使用默认 DOM 渲染器 - Canvas 版：
import { createCanvasApp } from './canvas-renderer'→ 使用自定义 Canvas 渲染器
同一份组件逻辑，在不同平台获得语义一致但实现各异的输出，真正实现“写一次，多端运行”的底层支撑。
