初探Vue3响应式系统

写这篇文章的灵感是来自：

公司的一个内部项目中的表格，以及业界有些在线流程图编辑器的编辑渲染区域等都是通过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

我们会发现其实默认传入的配置项，就是一些进行过重写的原生domAPI而已

2.调用的createRender函数是什么？

简略的讲就是创建渲染器函数，下面来看看这个函数体内容

最后返回一个对象，对象属性是3个函数，其中它的属性createApp执行后得到的就是一个app实例（createApp执行后会拿到一个app实例对象，这个对象包含了mount,use,component,mixin等方法,这就是为什么我们createApp()后可以链式调用.use/.mount等方法）

话说回来，我们要怎么去修改vue的渲染平台呢？即改变默认的渲染方式。

怎么改变？声明一个渲染器配置项

让我们来看看最终的渲染效果

in-crop-mark:4536:0:0:0.image?" style=“margin: auto” />

感谢大家的观看~

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取