vue3 自定义渲染器

685 阅读1分钟

本文已参与「新人创作礼」活动.一起开启掘金创作之路。

vue3支持自定义渲染器功能,开放了渲染相关的方法。

接下来会以自定义canvas渲染器的方式,实现canvas渲染,使canvas具备响应式的能力。

1.新建一个自定义渲染器的文件,renderer.js,

2.在main.ts 引入自定义的渲染器

image.png 3.

vue提供了createRenderer函数渲染虚拟dom,我们引入运行时核心库@vue/runtime-core,

createRenderer提供了多种可传入的渲染用到的函数,我们传入自定义渲染方式就可以实现自定义渲染。

在renderer.js中我们自定义了createApp同名方法,通过main.ts 传入的渲染节点,创建一个canvas标签,把内容挂载到canvas上显示

image.png insert://插入元素

通过拿到的虚拟dom,使用draw()渲染到canvas

image.png createElement:创建元素

image.png setElementText:创建元素文本

image.png patchProp:修改属性

image.png

draw:

image.png

vue代码,渲染到canvas里展示了

image.png

image.png