vue3源码解析

keepalive帮助我们保存组件的状态，它的原理并不复杂，就是保存默认插槽传入的组件在卸载时的状态，包括保存子组件的组件实例和el，我们直接看源码： 逻辑梳理：首先是keepalive组件挂载，首先

自定义指令 我们首先看指令在render函数中的表现形式 可以看到通过resolveDirective获取到对应的指令，然后使用withDirectives将拿到的指令加到相应元素的vnode上。

上一章介绍了Block树的概念，最后说到当遇到不稳定Fragment的时候不会去使用动态子节点，而是会去使用children与老的vnode节点进行diff算法，我们上节说过使用v-for命令的节点会

vue3利用模板的静态编译做了很多的性能优化，比如：静态提升、事件缓存、patchFlags和Block块的概念。接下来我们来具体看看他们是怎么做的（由于涉及到编译过程比较复杂，我们只看处理后的结果，

vue3新增了effectScope相关的API，其官方的描述是创建一个 effect 作用域，可以捕获其中所创建的响应式副作用 (即计算属性和侦听器)，这样捕获到的副作用可以一起处理。并给出了示例：

我们应该都知道或者听说过组件的更新是异步的，对于nextTick我们也知道它是利用promise将传入的回调函数放入微任务队列中，在函数更新完以后执行，那么既然都是异步更新，nextTick是怎么保证

computed和watch在面试中经常被问到他们的区别，那么我们就从源码的实现来看看他们的具体实现 computed 可以看到computed内部只是先处理getter和setter，然后new一个

上一章我们知道了组件是如何挂载渲染的，但是留了一个问题：响应式数据是如何收集的effect对象？ 这章我们就从reactive和ref两个声明响应式数据的API入手： reactive 实际调用的是c

根组件挂载的章节我们说到创建了根组件vnode后，我们去执行patch操作，挂载组件，下面我们就进入到patch，看看究竟干了什么 patch 进入patch，会对type进行一个判断，根绝类型来决定

provide/inject可用于跨组件数据传递，那么他到底是怎么实现的呢？inject获取值的顺序就是普通对象的取值顺序

本系列阅读的是vue3.3版本的源码。在列举源码的时候会省略部分源码，只保留与讲解内容相关的代码（运行环境代码块和兼容以前版本的代码也可能被省略），以此来方便读者理解。 源码阅读方式 我们通常会结合案