vue3源码

组件的挂载流程 添加组件类型 组件的渲染 processComponent 组件异步渲染 批处理操作scheduler.js

步骤 1、找到索引先放进去(按照默认最优的情况处理) 2、二分查找 在结果集中找到比当前值大的 用当前值的索引将其替换掉 3、前驱节点追溯 （核心点：记录 “要替换的值的 前一个的索引”）找到真正的最

入口： 接上一章的 patchKeyedChildren 函数 乱序比对 1、找到 新的vnode需要比对区域 打印结果： 2、遍历老的vnode的需要比对区域 打印结果 3、移动位置 倒序插入

入口 patchKeyedChildren 实现 有key的情况下 比较两个子节点的差异 1. sync from start: i <= e1 && i <= e2 2. sync from end

更新的逻辑 如果前后元素不一致， 删除老的 添加新的 老的和新的一样，服用。属性可能不一样，比对属性更新属性 比对子集 前后元素不一致 示例 实现 前后元素一致 文本更新 示例 实现 比较两个元素的属

使用方法 创建runtime-core包 runtime-core/package.json 虚拟节点的实现 形状标识 | 或运算 或运算 1 : 1 + + : + 1 0 0 0 : 16 = =

Vue中为了解耦， 将逻辑分成了两个模块 运行时 核心 （不依赖于平台的 browser test 小程序 app canvas....） 靠的是虚拟dom 针对不同平台的运行时 vue就是针对浏览器

多次触发更新处理 处理方法 数组 1) 收集索引 处理方法 2) 长度收集 3) 数组方法 访问变异方法会访问数组的长度，会对长度进行依赖，这里我们停止收集调用方法产生的依赖 effect 1). e

ef的概念 转换结果 Ref & ShallowRef 使用 实现 1、判断如果是对象 使用reactive将对象转为响应式的 2、set的值不等于初始值 判断新值是否是对象 进行赋值 toRef&t

使用场景 1、监控对象 可以监控数据变化 数据变化了就重新执行 2、可以去监控一个函数，函数的返回值就是老值 更新后获取新值 3、连续触发watch时需要清理之前的watch操作 达到以最后一次返回结

1、在constructor 中将用户的getter放到effec中， 能对getter函数进行依赖收集 activeEffect会变为 getter 2、创建ReactiveEffect时，传入sc

使用方法 逻辑 1、默认执行一次 2、如果非激活的状态 只需要执行函数 不是的话 把activeEffect 暴露到全局 方便别的模块取到 3、嵌套执行处理 4、执行的时候 获取数据 进行依赖收集 5

Reactivity模块基本使用 编写reactive函数 1、将数据变成响应式的， reactive 只能做对象的代理 2、在set和get中 用Reflect设置值和取值 3、响应式映射表 防止一

Vue3中使用pnpm workspace来实现monorepo (pnpm是快速、节省磁盘空间的包管理器。主要采用符号链接的方式管理模块) 全局安装pnpm pnpm 安装vue3.0 创建.npm

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

PS:自己记录用 看过官网的可忽略哦 渲染函数 h() 参数 示例：通过 level prop 动态生成标题 (heading) 的组件 使用 render 函数重写上面的例子 完整实现 注意事项 V

PS:自己记录用 看过官网的可忽略哦 创建一个应用实例 在应用中注册“全局”组件 应用实例暴露的大多数方法都会返回该同一实例，因此允许链式 根组件 mount 不返回应用本身,返回的是根组件实例 v-