vue3原理

vue3实现注册事件功能 首先我们在app.js的render函数中给我们的元素写上onClick事件，如图： 接着我们先实现一下，onClick事件的触发，可以在app.js中看到，我们的时间其实也

**vue3的shapeFlags实现** shapeFlags最主要的作用就是标识虚拟节点的类型，但其实如果只是为了标识类型查改方便，对象已经符合了我们所想要做的操作，为什么还需要用二进制来做的，主

vue3实现组件代理对象 首先我们在render函数中使用this.msg访问setup中return出来的对象的值的时，会发现访问到的值都是undefined。 所以我们需要在render中通过th

vue3的element挂载主流程实现 首先我们先来对App.js的render函数进行一个改造，让它拥有元素，属性，还有children，构造如下图： App.js： 1 接着上篇文章中的报错，我们

使用rollup打包自己的vue3 那直接开始打包流程吧： 1 我们先安装rollup 运行 yarn add rollup --dev 2 我们先给src加上一个打包的入口，在src下新增一个ind

vue3初始化component的主要流程 首先，先给出component初始化流程的思维导图，跟着思维导图会对整个流程非常清晰： 注：截图为项目到这一章所有的文件，等等也会给出涉及到文件的相应文件

vue3中computed计算属性的原理 computed和ref很像，都是变量.value，不一样的地方可能就是computed有缓存

我们使用vue3的时候就会发现script中的ref需要.value而template中的不用，其实他使用到到了proxyRefs对setup中的变量进行了转换，接下来就讲一讲proxyRefs原理及

isRef和unRef的原理及实现 这一节的两个功能点的实现非常的简单 isRef的功能：判断一个变量是否是一个ref类型 unRef的功能：直接取到变量的.value值 isRef测试用例： 实现：

vue3中ref的原理，ref功能实现 其实ref的实现也是很简单的，和reactive的思路是差不多的，但是要注意的点还是有的 1 ref 一般都针对单个值 怎么才能知道他被get 或 set 2

实现isProxy功能 isProxy：检测该变量是不是reactive或readonly，经过proxy包装过 分别在readonly和reactive两个测试用例中加入isProxy的测试： 实现

实现shallowReadonly功能 shallowReadonly： 让一个响应式数据变为只读的(浅只读) 接下来附上测试用例： 其实有了前面对响应式对象那一套的抽离后，现在要加入shallowR

实现reactive和readonly嵌套对象转换的功能 reactive嵌套 主要实现是reactive包装过的对象里面的其他对象也是reactive的 测试用例： 主要变化如图： 其实分析一下问题

优化stop功能 突然发现其实stop存在边缘案例是没有通过的，比如我图中红框中的obj.prop++ 当加上这句代码后，运行测试案例是不能通过的，原因分析： stop后已经把依赖清除了，obj.pr

实现isReactive和isReadonly isReactive实现 先上测试用例（其实这个测试用例也是reactive.spec.ts中追加的两个）: 实现： 1 reactive.ts中导出i

实现readonly功能 readonly是和reactived很类似但是不可以修改 所以就不需要依赖的收集和触发，因此他的代码十分简单 首先还是附上测试代码： readonly.spec.ts re

实现effect的stop功能 通过stop函数传入effect返回的runner 再次修改响应式对象的值的时候 不会修改成功 其实主要思路就是在调用stop函数的时候将 收集的effect依赖移除掉

effect.scheduler功能实现 主要先了解scheduler需要实现什么样的需求，有一下四点： 1 通过 effect 的第二个参数给定一个 scheduler 的 fn 2 effect

effect返回的实现 effect返回主要增加的两个点： 1 effect(fn) 调用返回一个runner函数 2 runner函数调用后返回fn中的return的值 给上测试用例： 1 调用ef

reactive对象的简单实现以及reactive的依赖收集和触发依赖reactive对象的简单实现