当前位置：首页 > news >正文

Vue3 自定义渲染器：从 DOM 到 Canvas 的跨平台渲染原理

news 2026/6/8 23:25:59

Vue3 自定义渲染器：从 DOM 到 Canvas 的跨平台渲染原理

一、Vue 的渲染边界：DOM 不是唯一目标

Vue3 的响应式系统和组件模型是平台无关的，但默认的渲染器只支持 DOM。当需要将 Vue 组件渲染到 Canvas、终端（CLI）、甚至 PDF 时，就需要自定义渲染器。Vue3 的渲染器 API 正是为这种跨平台场景设计的。

理解自定义渲染器的关键在于：Vue 的虚拟 DOM 不是为 DOM 设计的，而是一个通用的描述结构。渲染器负责将虚拟节点映射到具体的平台目标。DOM 渲染器将虚拟节点映射为 DOM 元素，Canvas 渲染器将虚拟节点映射为 Canvas 绘制命令，逻辑完全一致。

二、Vue3 渲染器架构与自定义原理

graph TB subgraph Vue核心 A[响应式系统<br/>reactive/ref] --> B[组件系统<br/>组件实例+生命周期] B --> C[虚拟DOM<br/>VNode树] end subgraph 渲染器层 C --> D{选择渲染器} D -->|DOM渲染器| E[createElement<br/>patchProp<br/>insert] D -->|Canvas渲染器| F[drawRect<br/>drawText<br/>clearRect] D -->|终端渲染器| G[writeLine<br/>setColor<br/>clearScreen] end subgraph 平台目标 E --> H[浏览器DOM] F --> I[Canvas画布] G --> J[终端输出] end

自定义渲染器的核心是createRendererAPI，它接收一个"平台操作"对象，包含节点创建、属性更新、子节点插入等方法的实现。Vue 内部负责虚拟 DOM 的 diff 和 patch 逻辑，渲染器只需要实现"如何操作具体平台"。

三、Canvas 渲染器实现

3.1 最小自定义渲染器

import { createRenderer } from '@vue/runtime-core'; interface CanvasNode { type: string; props: Record<string, any>; children: CanvasNode[]; parent: CanvasNode | null; } // 创建 Canvas 节点 function createElement(type: string): CanvasNode { return { type, props: {}, children: [], parent: null }; } // 创建渲染器 const canvasRenderer = createRenderer<CanvasNode, CanvasNode>({ createElement(type) { return createElement(type); }, createText(text: string) { return createElement('text'); }, setText(node: CanvasNode, text: string) { node.props.textContent = text; }, patchProp(node: CanvasNode, key: string, prevValue: any, nextValue: any) { // 将 Vue 的属性映射到 Canvas 绘制参数 node.props[key] = nextValue; }, insert(child: CanvasNode, parent: CanvasNode, anchor?: CanvasNode) { child.parent = parent; const index = anchor ? parent.children.indexOf(anchor) : parent.children.length; parent.children.splice(index, 0, child); }, remove(node: CanvasNode) { if (node.parent) { const index = node.parent.children.indexOf(node); node.parent.children.splice(index, 1); } }, parentNode(node: CanvasNode) { return node.parent; }, nextSibling(node: CanvasNode) { if (!node.parent) return null; const index = node.parent.children.indexOf(node); return node.parent.children[index + 1] || null; }, });

3.2 Canvas 绘制引擎

class CanvasPainter { private ctx: CanvasRenderingContext2D; constructor(canvas: HTMLCanvasElement) { this.ctx = canvas.getContext('2d')!; } /** 将虚拟节点树绘制到 Canvas */ paint(root: CanvasNode) { this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); this.paintNode(root, { x: 0, y: 0 }); } private paintNode(node: CanvasNode, offset: { x: number; y: number }) { const { type, props } = node; switch (type) { case 'rect': this.ctx.fillStyle = props.fill || '#ffffff'; this.ctx.fillRect( offset.x + (props.x || 0), offset.y + (props.y || 0), props.width || 100, props.height || 100 ); break; case 'text': this.ctx.font = props.fontSize ? `${props.fontSize}px sans-serif` : '14px sans-serif'; this.ctx.fillStyle = props.color || '#000000'; this.ctx.fillText( props.textContent || '', offset.x + (props.x || 0), offset.y + (props.y || 0) ); break; case 'circle': this.ctx.beginPath(); this.ctx.fillStyle = props.fill || '#ffffff'; this.ctx.arc( offset.x + (props.cx || 0), offset.y + (props.cy || 0), props.r || 50, 0, Math.PI * 2 ); this.ctx.fill(); break; } // 递归绘制子节点 for (const child of node.children) { this.paintNode(child, offset); } } }

3.3 使用自定义渲染器

import { defineComponent, ref, h, reactive } from '@vue/runtime-core'; // Canvas 组件定义 const App = defineComponent({ setup() { const count = ref(0); const increment = () => count.value++; return () => h('rect', { x: 10, y: 10, width: 200, height: 100, fill: '#4a90d9', onClick: increment, }, [ h('text', { x: 50, y: 60, fontSize: 24, color: '#ffffff', textContent: `点击次数: ${count.value}`, }), ]); }, }); // 挂载到 Canvas const canvas = document.getElementById('canvas') as HTMLCanvasElement; const painter = new CanvasPainter(canvas); // 使用自定义渲染器创建应用 const { createApp } = canvasRenderer; const app = createApp(App); // 自定义 mount：渲染后绘制到 Canvas app.mount(createElement('root'));