Vue 系列

前言 前面我们分别对 Vue 的 响应式、render、编译器 等内容的分析，至此我们还剩下最后一块内容，即 createAPP 函数的讲解。本篇也是 Vue3 源码解析系列 的最后一篇

前言 前面我们分别分析了 compiler 编译器中 ast 对象、transform 函数，接下来我们就来分析下编译器的最后一部分 generate 函数，该函数主要将 AST 转换为 render

前言 上一篇我们分析了 compiler 编译器中 template 是如何转换为 ast 对象的，本篇我们先来分析下 transform 函数是如何将 AST 转换为 Javascript AST

前言 前面我们分别对 Vue 的 响应式、h 函数、render 函数、diff 算法 的讲解，接下来我们就来分析下 compiler 编译器。 编译器 是一个非常复杂的概念，在很多语言中均有涉及

前言 上一篇我们分析了 diff 算法的前四步逻辑，第五步 乱序比对 逻辑 Vue 又分了三步来进行，那什么是 乱序比对 呢？我们知道节点的比较存在新增、删除、位置交换、内容更替等场景

前言 前面文章中我们都是讨论了单个子节点的更新，如果新旧子节点为多个，那么它们更新时就存在节点位置的交换、新增、删除、插入等场景。Vue 中主要通过 patchKeyedChildren 方法来实现

前言 组件 的渲染除了之前提到的情况外， 在 Composition Api 中还可以通过 setup 方法来进行，那它是如何运行的呢？我们来逐一分析。

前言 上篇我们分析了 组件生命周期 钩子函数是如何运行的，那 组件生命周期 钩子函数中是如何访问 响应式数据，以及组件生命周期中 响应式数据 改变是如何引起 视图 的改变呢？本篇我们就来一探究竟。

前面我们分别分析了 有状态 和 无状态 组件的渲染更新，除此之外 组件 还定义了一些 生命周期 钩子函数，具体可查看 官方文档，本篇就来逐一分析各个生命周期钩子函数是如何调用的。

前言 我们知道 组件 分为 有状态组件 和 无状态组件，上篇我们已经分析了 无状态组件，本篇我们就来讲解下 有状态组件 的挂载更新。

前言 前面我们分析了 render 函数对 虚拟 DOM 的渲染、更新、删除等，以及 DOM 的属性、样式、事件的挂载更新，本篇我们就来看下render函数是如何对component 组件进行挂载更新

前言 上篇我们分析了 render 函数对 HTML 标签属性、 DOM 属性、Style 样式、Event 事件的挂载更新，那么对于 Vue 特殊的 DOM 类型，比如 Text、Comment

前言 前面两篇我们分析了 render 函数是如何对 DOM 进行渲染、更新、删除的。除此之外，DOM 的其他属性，比如 type、value 等，以及样式 style、事件处理 的渲染及更新

前言 上一篇我们分析了 render 函数是如何将 虚拟 DOM 渲染为 真实 DOM 的过程，本篇我们就来看下 render 函数是如何实现 DOM 更新的。

前言 runtime 文中我们了解到，Vue 通过 h 函数生成 VNode 对象，再通过 render 函数将 VNode 对象渲染为真实 DOM。

前言 上篇 runtime 文中我们了解到，虚拟 DOM 是 Vue 在运行时，通过 h 函数获取到 VNode 对象，本篇我们就来看下 h 函数是如何实现的。

前言 当设计一个框架时，我们通常会选择 纯运行时、纯编译时、运行时 + 编译时 这三种。这里我们来聊聊 Vue3 源码中的 runtime 运行时

前言 Vue3 中响应式系统除了 reactive 和 ref 这两个函数外，我们还需了解下 computed 和 watch 这两个函数，它们也是响应式系统的关键所在

前言 Vue3 中响应式系统除了 reactive 和 ref 这两个函数外，我们还需了解下 computed 和 watch 这两个函数，它们也是响应式系统的关键所在。

前言 我们知道 Vue3 中声明响应式是通过 reactive 和 ref 这两个函数，上篇我们分析了 reactive 的实现原理，接下来我们再来看下 ref 是如何实现的。