vue组件不能直接渲染到canvas，需通过自定义渲染器将vnode翻译为canvas绘图指令；核心是重写createelement、patchprop、insert等函数，用renderer.render(vnode, canvasel)手动驱动绘制。
Vue 组件本身不能直接渲染到 Canvas，因为默认渲染器只认 DOM API。要让 Vue 在 Canvas 上绘图，关键不是改组件写法，而是换掉底层的“执行引擎”——也就是实现一个自定义渲染器，把 VNode 翻译成 ctx.fillRect、ctx.arc 这类 Canvas 指令。
核心思路：VNode 是意图，渲染器是翻译官
VNode 只描述“要画什么”，比如 { type: 'rect', props: { x: 10, y: 20, width: 100, fill: '#42b883' } }；渲染器负责把这句话变成实际动作。Vue 内部处理 diff 和响应式更新，你只需提供一套 Canvas 专用的操作函数。
- createElement 不创建 DOM 元素，而是返回轻量对象，代表绘制指令
- patchProp 不设 style 或 class，而是监听 fill、stroke 等属性，触发 ctx.fillStyle = nextValue
- insert 不追加子节点，而是在每次 render 前清空画布，再遍历 vnode 树逐个调用绘制方法
- 不依赖 mount，改用 renderer.render(vnode, canvasEl) 手动触发
Canvas 渲染器必须重写的几个关键函数
使用 @vue/runtime-core 的 createRenderer 创建渲染器时，至少要实现以下平台操作：
- createElement(type)：返回 { type, props: {}, children: [], parent: null }，type 可为 'rect'、'circle'、'text' 等语义化类型
- patchProp(node, key, prev, next)：对 fill、stroke、fontSize 等属性做映射，例如 key === 'fill' 时执行 ctx.fillStyle = next
- insert(child, parent, anchor)：这里不插入 DOM，而是将 child 加入 parent.children，并在 render 阶段统一绘制
- createText(text)：返回 { type: 'text', text }，后续由 setText 设置内容
- setText(node, text)：node.text = text，绘制时调用 ctx.fillText(node.text, node.x, node.y)
组件怎么写？用语义化标签，不是 HTML
你仍然可以写类似 HTML 的模板，但标签名需与渲染器约定一致：
- 定义
<canvasrect></canvasrect>组件，setup 中 return () => h('rect', { x, y, width, height, fill }) - 定义
<canvascircle></canvascircle>，对应 type: 'circle'，props 含 cx、cy、r、stroke - 根容器
<canvas></canvas>负责获取 ctx、监听 resize、管理 clearRect 逻辑 - 所有组件支持
key，确保 diff 时能识别图形变更而非全量重绘
实际运行：不 mount，要 render + requestAnimationFrame
Canvas 没有挂载点概念，需手动绑定 canvas 元素并驱动循环：
- 用 document.querySelector('#my-canvas') 获取 canvas 元素，传给 renderer.render(vnode, canvasEl)
- render 函数内部获取 ctx = canvasEl.getContext('2d')，并在开头调用 ctx.clearRect()
- 结合 watchEffect 或 requestAnimationFrame 实现响应式重绘：数据变 → 触发 render → 重新绘制整帧或局部
- 避免在 setup 中直接 return h('div') —— 'div' 会被默认渲染器当作 DOM 标签报错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
