Vue3源码篇

我们补充一下之前的reactive模块，这里做代理的时候还需要处理对象嵌套对象的情况，要做深度代理 get的时候 取了属性之后，如果是对象的话，再次做下代理 Proxy是取的时候再代理，而不是像vue

我们可以决定effect执行的时机 实现：我们在ReactiveEffect里增加stop方法 改变激活状态 停止effect的收集 增加effect的返回值 但是现在会有一个问题，有时候状态改变了我

我们先来看一个例子 第一次setTimeout执行，我们已经不依赖state上的name属性了，然后第二个setTimeout时我们又修改了state上的name属性 但是在转换前name收集了这个e

我们的目的的让属性和函数产生关联 我们写这个类的原因是为了扩展这个函数的功能，进而在属性变化的时候，除了重新执行函数之外，还可以做一些其它的事情，比如重新渲染 effect方法会在初始的时候调用一次，

effect函数的参数是一个函数，这个函数还可以根据状态变化，重新执行，effect可以嵌套着写。 我们需要把传进来的函数包装一下，让它成为响应式的effect，返回值就是一个响应式的effect 我

我们先看一下官方的reactivity模块 reactivity模块中最重要的两个api，effect和reactive effect代表的是副作用函数，如果此函数依赖的数据发生了变化，会重新执行 

Vue3中使用pnpm workspace来实现monorepo（pnpm是快速、节省磁盘空间的包管理器。主要采用符号链接的方式管理模块） 全局安装pnpm 创建packages文件夹，用来存放所有的

Monorepo管理项目 Monorepo是管理项目代码的一个方式，指在一个项目仓库（repo）中管理多个模块/包（package）。Vue3源码采用monorepo方式进行管理，将模块拆分到pack

Vue设计思想 Vue3更注重模块上的拆分，在2.0中无法单独使用部分模块。需要引入完整的Vuejs（例如只想使用响应式部分，但是需要引入完整的Vuejs），Vue3中的模块之间耦合度低，模块可以单独

前言 我们乱序比对的时候，会将节点全部的移动一遍，而我们希望尽可能少的移动，我们只需要找联系最长的，只需要动不连续的，这就是最长递增子序列 第一步 求最长递增子序列，vue3采用的算法是贪心+二分查找

前言 我们上回说到，当老的是数组，新的也是数组就会进行diff算法 第一步 将老的儿子和新的儿子以及比较的是哪个元素 第二步 Vue3并没有采用双指针，都是默认从头开始比对 情况1 先定义一个变量，值

如果被挂载过，也就是isMounted为true，触发effect的时候就会走组件更新的逻辑 diff算法就是比较两颗树的差异 第一步 我们先拿到老的的tree 然后把当前实例上的proxy数据传入r

当数据一变，就会触发对应的effect，然后重新调render重新渲染 第一步 首先我们需要处理一个事件里重复修改同一个值多次更新的问题，我们需要降低更新频率 我们在创建effect让render执行

上回说到在完成创建实例，给实例赋值后要创建一个effect，让render函数执行，这样render方法中拿到的数据就会收集这个effect，属性更新时，effect会重新执行，重新再次调用rende

第一步  用位运算来给虚拟节点加类型，我们先创建ShapeFlag.ts文件 第二步 创建vnode.ts文件写createVNode方法 创建一个对象来描述内容，上面的shapeFlag就是我们通过

第一步 先封装一些dom的操作 元素操作： 文本操作： 第二步 在src下创建module文件夹，创建4个文件attr.ts、class.ts、event.ts、style.ts 在class.ts中

第一步 src源目录下创建computed.ts 导出computed函数，并对参数进行判断 如果是个函数，直接赋值给getter，否则分别取参数get和set赋值给getter和setter 最后返

前言 ref和reactive的区别 reactive内部采用的proxy，ref内部采用的是defineProperty ref也可以放对象，只是取值的时候需要多取一层，如果是对象用reactive

前言 设置方法中比获取要复杂一些，有很多种情况，下面我将一一详细讲解 createSetter 第一步 我们先去扩充一下工具方法，方便后面使用 我们要区分是新增的还是修改的，因为有可能是数组，所以要考

effect effect方法是响应式的核心，叫做副作用函数。初始会默认执行时会进行取值操作，只要取值就会调用get方法，我们就可以将对应的effect函数存放起来，等会我们去更新effect函数内部