Vue跨平台核心是替换渲染器而非改写组件，通过解耦VNode与Renderer实现：VNode描述需求，自定义Renderer将VNode翻译为Canvas、小程序等目标平台操作。
Vue.js 实现跨平台组件，关键不在改写组件本身，而在于替换默认的 DOM 渲染器——用自定义 renderer 把同一套 VNode 描述，翻译成 Canvas、小程序、原生视图等目标平台能理解的操作。
核心原理：VNode 与 Renderer 彻底解耦
VNode 是纯数据结构，只描述“要什么”，不关心“怎么画”。Vue 3 的 runtime-core 负责 diff、响应式更新和组件生命周期，它把所有平台相关动作（创建节点、设属性、插入子节点）抽成一组可替换的函数。你只需实现这些函数，就能让 Vue 在非浏览器环境跑起来。
- VNode 保持不变：组件仍用
<CanvasRect>或<WxButton>这类语义化标签编写，编译后生成标准 VNode 树 - Renderer 负责翻译：比如
createElement('rect')不调document.createElement，而是返回一个含x、y、fill的对象；patchProp不设el.style.color，而是更新 canvas 上下文的 fillStyle - 挂载方式不同：不用
app.mount('#app')，而是手动调用renderer.render(vnode, canvasContext)或转为小程序 setData 数据
Canvas 环境：用 ctx 做真实绘制
Canvas 没有节点树，渲染器需自行管理绘制状态和清屏逻辑。
- 定义轻量节点结构，如
{ type: 'circle', props: { cx: 50, cy: 50, r: 20, fill: '#333' } } -
insert不插入 DOM，而是把节点推入待绘队列；render阶段统一调用ctx.beginPath()、ctx.arc()等方法 - 每次 render 前执行
ctx.clearRect(0, 0, width, height)，或更优地只重绘 dirty 区域（需配合 patch 差异比对） - 组件模板可为空：
<template></template>，所有视觉逻辑由 renderer 和 props 驱动
小程序环境：VNode 作为数据映射中间层
小程序无法执行 canvas 绘图逻辑（除非用内置 <canvas> 组件），也不允许动态操作节点，因此 VNode 不直接渲染，而是转为 setData 数据源。
立即学习“前端免费学习笔记（深入）”；
- 用工具链（如 miniprogram-render 或 uni-app）将 Vue SFC 编译为 WXML + JSON 数据结构
- VNode 的
type映射为 WXML 标签名（如'wx-button'），props映射为属性对象，children转为数组传给setData - 事件绑定靠 WXML 模板声明，renderer 将
@click编译为bindtap，再桥接到 Vue 方法 - 需处理生命周期对齐：如将小程序
onReady触发 Vue 的mounted钩子
通用实现要点
无论目标平台是啥，几个关键点必须覆盖：
-
宿主节点类型明确：Canvas 渲染器的
HostNode是普通 JS 对象；小程序渲染器中可能是 WXML 数据片段；Native 渲染器里则是原生 View 实例 -
属性更新粒度可控：不要每次全量重绘，
patchProp应识别变更项（如仅颜色变就只调ctx.fillStyle = newColor） -
文本与注释支持：哪怕 Canvas 不显示文字，也要实现
createText和setText，否则插值表达式{{ msg }}会报错 - 组件嵌套递归挂载：子组件返回的 VNode，仍由同一 renderer 处理，确保整棵树都在同一渲染语义下
