虚拟 dom 是跨平台 ui 构建的起点，本质是轻量、可序列化、与环境无关的 javascript 对象（vnode），含 type、props、children 三字段；渲染器通过宿主操作接口将 vnode 转为具体输出，支持自定义目标平台与渲染逻辑。
虚拟 DOM 不是渲染的终点，而是跨平台 UI 构建的起点。它把“UI 长什么样”变成一个纯 JavaScript 对象（VNode），而渲染器决定“这个描述怎么落地”——在浏览器里生成 DOM，在 Canvas 里画图形，在终端里输出字符，甚至在打印机上排版 PDF。
虚拟 DOM 的本质：轻量、可序列化、与环境无关
一个 VNode 就是一个普通对象，通常包含 type（标签名或组件）、props（属性/事件）、children（子节点）三个核心字段。它不依赖浏览器 API，也不持有真实 DOM 引用，因此可以被创建、比较、克隆、传输，甚至在服务端运行。
- type 可以是字符串（如 'div'），也可以是函数或对象（代表组件）
- props 中的事件监听器是普通函数，不是 addEventListener 的绑定结果
- children 可以是字符串、数组、其他 VNode，甚至 null 或 undefined
渲染器 = VNode + 宿主操作接口 + 协调逻辑
Vue 3 的 renderer 是可插拔的。你不需要重写整个框架，只需提供一套针对目标环境的操作函数，比如：
- hostCreateElement：在 Canvas 中创建一个绘图指令，在终端中生成一行文本
- hostSetElementText：调用 ctx.fillText()，或直接拼接字符串
- hostInsert：把绘制命令推入队列，或向 stdout 写入内容
- hostPatchProp：处理 style、class、事件等，按目标环境语义映射
这些函数组合起来，就构成了一个能“读懂”VNode 并“执行”它的渲染器。
为什么需要自定义渲染器？不只是为了新平台
它解决的不只是“渲染到哪”的问题，更是“怎么控制渲染过程”的问题：
- 做性能敏感场景：游戏 UI、实时仪表盘，跳过 DOM 层直连 WebGL
- 做测试友好输出：把组件渲染成 JSON 结构，方便快照比对
- 做无障碍增强：生成带完整 ARIA 树的语义化描述，而非仅视觉元素
- 做 SSR 或静态导出：同一套组件，输出 HTML 字符串或 PDF 页面树
从 h() 到真实输出：一条清晰的链路
开发者写 h('button', { onClick: handler }, 'Click me')，得到一个 VNode；渲染器拿到它，调用 host 函数一步步展开；协调器（reconciler）负责复用已有节点、最小化更新、触发生命周期——整条链路解耦明确，每一环都可替换、可调试、可监控。
不复杂但容易忽略：真正让自定义渲染器落地的，不是 VNode 的写法，而是宿主操作是否准确表达了目标环境的约束和能力。
