自定义渲染器是 vue 3 将 vnode 映射到目标平台操作的翻译官，不涉响应式与编译，只负责将 vnode 转为平台特有动作，如 canvas 中调用 fillrect 或小程序中触发 setdata。
自定义渲染器是 Vue 3 将虚拟节点（VNode）映射到具体平台操作的“翻译官”。它不负责响应式或模板编译，只管把 VNode 描述的结构，变成目标环境能执行的动作——比如在浏览器里调用 document.createElement，在 Canvas 里调用 ctx.fillRect()，在小程序里触发 setData。
它不是改组件写法，而是换底层执行逻辑
Vue 组件本身无需修改：你依然用 setup、ref、watchEffect 管理状态，依然写 <canvasrect :x="cx" :fill="color"></canvasrect> 这样的标签。区别在于，这个 CanvasRect 不会被 Vue 当作 HTML 标签去查 DOM API，而是由你写的渲染器识别为“画一个矩形”，然后交给 Canvas 上下文去执行。
- 默认的 DOM 渲染器会报错：因为
rect不是合法 HTML 标签名 - 你的自定义渲染器要接管
createElement，让它返回一个轻量对象，例如{ type: 'rect', props: { x: 10, y: 20, width: 100 } } - 还要重写
patchProp，当fill属性变化时，不是设 DOM 的 style，而是调用ctx.fillStyle = nextValue
Canvas 环境：把绘图变成可 diff 的指令流
Canvas 本身没有节点树，不能增删元素。自定义渲染器的作用，就是给它“模拟”出一套可更新的结构：
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
-
定义语义化 vnode 类型：如
'rect'、'circle'、'text'，每个对应一组 Canvas API 调用 -
管理上下文与清屏：每次
render()前调用ctx.clearRect(0, 0, width, height)，再遍历 vnode 树逐个绘制 -
支持 key 和 diff：靠
key区分不同图形，patch 阶段只重绘属性变更的部分（比如只改颜色，不重画位置） -
抽象 hostContext：把
ctx.fillRect封装成drawRect(x, y, w, h)，方便未来对接 WebGL 或小程序 canvasContext
小程序环境：VNode 不直接画图，只驱动数据更新
微信小程序不支持运行时执行 Canvas 绘图逻辑（除非用 <canvas></canvas> 组件并手动管理），也不能运行完整 Vue 运行时。所以这里的“跑在小程序上”是指：
- 用 Vue 工具链（如 uni-app 或
miniprogram-render）把组件编译成 WXML + JS 逻辑 - VNode 在这里退化为状态快照：描述当前该显示什么、坐标多少、颜色如何
- 渲染器不操作 canvas，而是把 VNode 数据转成
setData({ canvasData: [...] })，交由 WXML 中的<canvas></canvas>组件配合createCanvasContext执行绘制 - 核心复用的是 Vue 的响应式和组件组织能力，而非 DOM 渲染流程
动手的关键一步：别 mount，要 render
你不会写 createApp(App).mount('#app')。正确入口是：
- 调用
createRenderer(options)构建你的渲染器 - 手动生成 VNode：
const vnode = h('rect', { x: 10, y: 20, width: 100, fill: '#42b883' }) - 获取 canvas 元素并拿到 2D 上下文：
const ctx = canvas.getContext('2d') - 手动触发：
renderer.render(vnode, { ctx })—— 注意 container 是你传进去的上下文对象，不是 DOM 节点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
