持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情
写这篇文章的灵感是来自：
公司的一个内部项目中的表格，以及业界有些在线流程图编辑器的编辑渲染区域等都是通过canvas画的，从未接触过canvas的我对此表示震惊，难道canvas不应该是一线一点的画，这一个页面得画多久并且接口数据该怎么显示呢，同事说可以去了解了解custom renderer这个特性。
custom renderer 顾名思义：自定义渲染器
怎么去理解这个概念呢，Vue是一个基于mvvm模型的框架。
在传统mvc模式，我们使用jquery都需要手动使用appendChild、createElement等domAPI来更新视图，而mvvm模型，只需要关注业务逻辑，当我们的使用逻辑改变model层的数据后，view层就能响应到并进行更新。
我们再往深度思考些，我们在使用vue这些框架时候，为啥就不需要去使用这些domAPI了呢，这就是mvvm的魅力，这些操作都是框架底层进行的，无需我们手动操作，而更加专注于业务逻辑层的开发工作。
最后我的理解是，渲染器就是通过控制、完善这些dom的操作来达到渲染目的。而自定义渲染器，就是我们作为用户可以去改变控制这些操作来实现自定义底层的domAPI。
让我们来看一段代码：使用vue时候，我们在main文件中经常会写出以下的代码。
createApp(app).mount('#app')
先告诉你结果：当你写这串代码后，你就告诉了vue采取默认浏览器dom平台的模式。 那我们要自定义这个平台能力，那自然就是要对这串代码进行改写了！
如何改变vue默认浏览器dom平台模式。
让我们从源码来分析createApp干了些什么？
调用createRender传入了默认的配置项 得到的renderer渲染器，所以我们可以理解为createApp是使用的默认平台。
1.默认配置项是什么？即rendererOptions
ps: pure这个注释是为了如果该函数无执行的话删去该代码，方便打包工具进行treeshaking，降低包体积
我们会发现其实默认传入的配置项，就是一些进行过重写的原生domAPI而已
2.调用的createRender函数是什么？
简略的讲就是创建渲染器函数，下面来看看这个函数体内容
最后返回一个对象，对象属性是3个函数，其中它的属性createApp执行后得到的就是一个app实例（createApp执行后会拿到一个app实例对象，这个对象包含了mount,use,component,mixin等方法,这就是为什么我们createApp()后可以链式调用.use/.mount等方法）
话说回来，我们要怎么去修改vue的渲染平台呢？即改变默认的渲染方式。
怎么改变？声明一个渲染器配置项
最后进行挂载
让我们来看下canvasStage这个文件干了什么？（借助pixi.js能力进行绘制canvas）
最后让我们来看看App这个组件代码
让我们来看看最终的渲染效果
感谢大家的观看~
