Vue 3 渲染机制通过 createRenderer 实现跨平台，核心是将 VNode 映射为目标环境对象；需实现 createElement、insert、patchProp 等接口；适配 Canvas、WebGL、终端等场景时聚焦其本质能力。
Vue 3 的渲染机制天然支持非 DOM 环境，关键在于用 createRenderer 替换默认的 DOM 操作逻辑，把虚拟节点（VNode）映射到目标平台的具体对象或指令上。
核心原理：虚拟 DOM 是平台无关的数据结构
Vue 组件编译后生成的是描述 UI 的 JavaScript 对象树（VNode），不包含任何 DOM API 调用。例如：
-
{ type: 'rect', props: { x: 10, fill: '#f00' }, children: [] }可代表一个 Canvas 矩形 -
{ type: 'text', text: 'Hello' }可表示终端中的一行输出 - 这些对象本身不执行绘制，只承载结构和状态信息
必须实现的关键操作方法
调用 createRenderer(options) 时需提供一组底层接口，Vue 运行时靠它们完成真实渲染：
- createElement(type)：返回目标环境的“元素”对象（如 Canvas 中的图形配置对象）
- insert(child, parent)：把子对象加入父容器（如向 Canvas 渲染队列 push 一个绘图指令）
- patchProp(el, key, prev, next)：响应式更新属性（如修改 WebGL 材质颜色或终端文字样式）
- remove(el, parent)：从容器中剔除对应项（如从 Canvas 列表中 splice 掉已销毁组件）
- setElementText(el, text)：设置纯文本内容（如重写控制台某行输出）
常见非 DOM 场景适配要点
不同目标环境关注的重点不同，实现时需聚焦其本质能力：
立即学习“前端免费学习笔记（深入）”；
-
Canvas：不必创建真实 DOM 元素，
createElement返回轻量配置对象；patchProp触发重绘标记，最终由统一 render loop 批量执行 draw calls -
WebGL：
createElement可返回带 geometry、material、transform 的实体；属性更新常需同步 GPU 缓冲区 -
终端/Console：所有节点可统一为树状文本结构；
insert和remove操作实际是数组增删；setElementText直接替换子节点文本 -
原生移动（如 React Native 模式）：
createElement返回平台原生视图句柄；patchProp转为调用原生 setter 方法
快速起步：一个最小可用 Console 渲染器
以下代码可直接运行，将 Vue 组件输出为嵌套文本结构：
-
createElement返回带type、props、children的普通对象 -
insert把子节点推入父节点children数组 -
setElementText清空children并插入一个文本子节点 - 最后用递归函数将整个 VNode 树格式化为缩进字符串即可预览效果
