vue 跨平台渲染依赖可替换的渲染器，虚拟 dom（vnode）作为统一中间层抽象界面结构，runtime-core 提供通用逻辑但不操作平台 api，各平台渲染器负责适配原生能力。
渲染器是跨平台的枢纽
Vue 的 runtime-core 提供通用响应式系统、diff 算法和更新调度逻辑，但它不操作任何平台 API。所有平台相关动作，都由你传入的渲染器实现：
-
Web 渲染器：调用
document.createElement、el.setAttribute、el.appendChild等原生 DOM 方法 -
Canvas 渲染器：维护画布上下文
ctx，将 VNode 映射为ctx.fillRect、ctx.fillText等绘图指令 - 小程序/原生渲染器：生成 WXML 结构或调用 iOS/Android 原生控件 API
VNode 是跨平台的公共语言
虚拟节点（VNode）只保留必要信息：节点类型（如 div、text）、属性（id、style）、子节点列表和 key。它不依赖 HTML 标签语义，也不调用任何平台接口，因此可被任意后端或环境解释。
比如一个按钮组件，在 Web 中生成真实 <button></button> 元素；在 Canvas 中则被理解为“在 (100, 50) 绘制带圆角、蓝色填充、居中文字的矩形”，两者共享同一份模板与响应式逻辑。
平台能力需额外补足
不同平台天然能力差异大，渲染器必须自行实现缺失机制：
-
布局计算：Canvas 没有 CSS 盒模型，需内置简易布局引擎，把
width/margin转为绝对像素坐标 -
事件映射：监听 canvas 的原始事件，再根据鼠标位置反查命中哪个 VNode，手动触发
onClick - 脏区更新：避免全画布重绘，只刷新变更节点的边界矩形（dirty rect）
一套代码，多端运行靠构建时切换
组件代码完全使用标准 Vue 语法（<template></template> 或 setup），不直接访问 document 或 ctx。构建时通过不同入口文件加载对应渲染器：
- Web 版：导入
@vue/runtime-dom，调用createApp() - Canvas 版：导入自定义渲染器，调用
createRenderer().createApp()
这种设计让跨平台不是“写一次到处跑”的魔法，而是“逻辑共用、渲染分离”的可控架构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
