Vue3源码篇

前言 vuex缺点：ts兼容性不好、命名空间的缺陷、只能有一个store、mutation和action pinia 优点：ts兼容性好 、不需要命名空间，可以创建多个store、mutation删掉

前言 Vue3新增组件，该组件可以将制定内容渲染到制定容器中。默认内容都是渲染到元素app内，我们可以将其渲染到任意节点（传送门） 示例 页面结果 实现 createVnode里加上teleport的

前言 provide和inject就是为了实现跨级通信，比如在组件库中，想跨级通信，那么就可以采用provide/inject 在vue3中，provide和inject只能在setup中使用 所有的

PatchFlags优化 Diff算法无法避免新旧虚拟DOM中无用的比较操作，通过patchFlag来标记动态内容，可以实现快捷diff算法 我们模拟一个template模板内容被编译成虚拟节点后的内

在vue3中，setup完全取代了beforeCreate和created两个钩子 示例： 实现： 创建全局变量currentInstance用来保存当前实例，并提供设置和获取的方法 在组件的setu

事件用法示例 实现绑定事件：         我们上篇实现setup的时候，会把组件实例上的props和一个上下文传给setup，我们现在就要把emit放到这个上下文对象里面 vue3会把绑定的事件转

setup函数的作用 组件的render函数每次更新时都会重新执行，但是setup函数只会在组件挂载的时候执行一次 setup函数是compositionAPI的入口 可以在函数内部编写逻辑，解决vu

引言： 上一篇我们实现了组件属性改变后，组件更新的原理。然而后续插槽改变也会引起组件的更新，这两块更新逻辑是不一样的，我们其实可以把这两块的逻辑最后触发更新的入口统一起来，在我们之前写到组件渲染原理的

示例 我们现在想实现的就是更改组件的props实现组件的更新，按照之前文章的逻辑，我们只实现了组件的初始渲染，并没有实现更新逻辑 增加组件的更新逻辑 当n1不存在，也就是不存在老的虚拟节点，会走组件的

组件用props接收了，那么传给组件的值就能在this里拿到，如果没用props接收，那么只能在$attrs里拿到，$attrs里的值并不是响应式的，但是props里的值是响应式的 实现： h处理完传

Vue3兼容了Vue2的写法，我们先用vue2的语法来写组件 在runtime-core模块下的vnode.ts文件里创建虚拟节点的createVnode方法里，第一步判断type类型的时候，我们修改

Vue3支持多个根节点，通过Fragment来实现，原理比较容易 我们用一个Fragment容器来渲染多个节点 首先，在runtime-core模块中的vnode.ts里文件里新加一个类型Fragme

Vue3中求这个最长递增子序列用的是贪心算法+二分查找 当前这一项比最后一项大则直接放到末尾 如果当前这一项比最后一项小，需要在序列中通过二分查找找到比当前大的这一项，用他来替换掉 最优的情况就是默认

接上回说到，当老的虚拟节点的儿子是一个数组类型，新的虚拟节点的儿子也是一个数组类型，那么就会进行diff比较 我们现在来写patchKeyedChildren 有Key情况下，先从头部比较 我们先创建

接上回，如果存在老的虚拟节点，我们就走更新流程 更新的逻辑思考 如果前后完全没关系，删除老的，添加新的 老的和新的一样，复用。属性可能不一样，再比属性，更新逻辑 比儿子 判断老的虚拟节点和新的虚拟节点

接上回说到，我们已经实现了h方法和createVnode方法，那么我们目前已经可以拿到处理后的虚拟dom和用户传入的renderOptions，接下来我就开始进行渲染 在runtime-core模块下

h方法是给用户来用的，它具备着多样性。我们先来写createVnode 在公共包shared里写上ShapeFlags 采用二进制来标识某些东西 在runtime-core模块里创建vnode.ts文

Vue为了解耦，将逻辑分成了两个模块 运行时 （不依赖平台的browser），主要靠的是虚拟dom，它是可以跨平台的 针对不同平台的运行时，vue就是针对浏览器平台的 runtime-dom提供一个渲

如果参数是一个基本类型，ref会把一个基本类型包装成一个对象类型，也支持传数组或者对象，最后也会变成proxy 官方用法 我们现在来实现它 创建ref.ts文件，导出ref方法 创建一个RefImpl

常用用法 方式一： 如果state是个对象，那么后续改动这个对象里的属性，回调里拿到的都是新值，也就是说当watch监听对象的时候无法区分前后的新值和老值 这种监控是深度监控，无论state的层数有多