Vue3 源码系列

代码运行结果 代码示例 第一：第一次 KeepAlive 组件挂载的时候，还是走正常逻辑，组件挂载可以看之前的这篇文章， # [Vue 源码] Vue 3.2 - 组件挂载原理 这里我们直接到执行 s

代码运行结果 代码示例 第一：首先调用 defineAsyncComponent 函数，并传入 option. 在 函数中初始化状态后，返回一个 defineComponent 定义的组件对象。 第二

代码运行结果 代码示例 第一：调用 onMounted 生命周期函数，实际上是调用了 createHook 函数，并通过枚举类型，传入生命周期的 type。 生命周期 枚举类型的 type, 就是首字

代码运行结果 代码示例 第一：mountComponent 挂载组件阶段， 创建每个组件实例的时候，每个子组件实例的 provides 属性，默认继承自父组件实例的 provides 属性。 第二：调

代码运行结果 代码示例 第一：挂载子组件的时候，通过 h， createVNode 函数，创建虚拟 Dom 的时候，在 normalizeChildren 函数中 判断第三个参数是对象，则给子组件的示

代码运行结果 代码示例 emit 原理 第一：挂载逻辑可以看以前的文章：Vue 组件挂载原理， 这里我们聊关键的部分。 挂载子组件的时候，将 count, onChildUpdate 自定义事件函数

代码运行结果 代码示例 挂载阶段 第一步，执行第一句代码，createApp(App).mount("#app"); 进行组件挂载。可以查看之前的文章，来看详细流程。 我们这里只聊聊组件挂载的核心，详

运行结果 代码示例 组件挂载 第一：执行第一句代码 createApp 函数，传入 App 组件。实际上调用的是 createAppAPI 函数返回的 createApp，在 createApp 函数

运行结果 代码示例 挂载阶段 第一：调用 toRef 函数，调用 new ObjectRefImpl 创建 objectRef 对象。 第二：调用 ObjectRefImpl 的 constructo

概述 Vue Diff ，React Diff 算法都是同级节点的递归比较, 核心就是复用。 为什么是同级比较，笔者认为用户在操作 Dom 节点的时候，很少有将儿子节点变为父亲的情况，多数都是 向后追

运行结果 代码示例 执行第一句代码：ref(false), 调用 ref 函数 第一： ref函数，调用 createRef 函数。 第二：createRef 函数中, 通过 new RefImpl

代码运行结果 代码示例 挂载阶段 第一：第一篇文章详细介绍了 reactive 创建响应式流程，我们这里默认已经创建好了响应式对象 obj。 [Vue 源码] Vue 3.2 - Reactive 原

代码运行结果 代码示例 挂载阶段 第一：第一篇文章详细介绍了 reactive 创建响应式流程，我们这里默认已经创建好了响应式对象 obj。 [Vue 源码] Vue 3.2 - Reactive 原

代码运行结果 代码示例 挂载阶段 执行第一句代码：const state = reactive({ name: 'cyan', age: 18 }) 第一：reactive 会通过调用 createR