第1章 课程导读 试看1 节 | 10分钟

明确课程的核心：这是一个让《初级软件开发工程师都能够学会》同时可以让《高级软件工程师也能收获颇多，更进一步》的源码课

收起列表

• 视频：1-1 课程导读 (09:39)试看

第2章 框架设计前瞻 – 框架设计中的一些基本概念14 节 | 96分钟

本章节主要需要介绍框架设计中的基本概念，因为对于很多开发者而言，平时工作中，更多的是针对应用进行开发，对框架本身的设计接触比较少，所以我们需要在一开始的时候，进行一个科普。

收起列表

• 视频：2-1 前言 (01:54)
• 视频：2-2 编程范式之命令式编程 (06:19)
• 视频：2-3 编程范式之声明式编程 (04:27)
• 视频：2-4 命令式 VS 声明式 (07:21)
• 视频：2-5 企业应用的开发与设计原则 (06:56)
• 视频：2-6 为什么说框架的设计过程其实是一个不断取舍的过程？ (05:49)
• 视频：2-7 .vue 中的 html 是真实的 html 吗？ (04:56)
• 视频：2-8 什么是运行时？ (17:16)
• 视频：2-9 什么是编译时？ (07:44)
• 视频：2-10 运行时 + 编译时 (16:19)
• 视频：2-11 什么是副作用 (04:07)
• 视频：2-12 Vue 3 框架设计概述 (04:47)
• 视频：2-13 扩展：所谓良好的 `TypeScript` 支持，是如何提供的？ (06:11)
• 视频：2-14 总结 (01:04)

第3章 Vue 3源码结构 – 搭建框架雏形 试看12 节 | 84分钟

主要讲解Vue 3 源码如何进行 debugger、源码的各个模块是如何进行划分与配合工作的、Vue 3 的代码框架设计有什么独特之处。

收起列表

• 视频：3-1 前言 (01:27)
• 视频：3-2 探索源码设计：Vue3 源码设计大解析 (11:45)
• 视频：3-3 创建测试实例：在 Vue 源码中运行测试实例 (09:01)
• 视频：3-4 跟踪解析运行行为：为 vue 开启 SourceMap (09:06)试看
• 视频：3-5 授人以鱼：如何针对源码进行 debugger (05:06)
• 视频：3-6 授人以渔：如何阅读源码 (07:24)
• 视频：3-7 开始搭建自己的框架：创建 vue-next-mini (06:02)
• 视频：3-8 为框架进行配置：导入 ts (07:44)
• 视频：3-9 引入代码格式化工具：prettier 让你的代码结构更加规范 (06:10)
• 视频：3-10 模块打包器：rollup (12:38)
• 视频：3-11 初见框架雏形：配置路径映射 (05:16)
• 视频：3-12 总结 (01:27)

第4章 响应系统 – 响应系统的核心设计原则 试看8 节 | 61分钟

从 vue 2 到 vue 3，从 Object.defineProperty 到 Proxy 。这样的升级带来了什么样的变化，Object.defineProperty 又存在哪些设计层的缺陷呢？本章统统告诉你

收起列表

• 视频：4-1 前言 (01:50)
• 视频：4-2 JS 的程序性 (04:35)
• 视频：4-3 如何让你的程序变得更加“聪明”？ (05:24)
• 视频：4-4 vue 2 的响应性核心 API：Object.defineProperty (08:19)
• 视频：4-5 Object.defineProperty 在设计层的缺陷 (08:59)试看
• 视频：4-6 vue3的响应性核心 API：proxy (14:20)
• 视频：4-7 proxy的最佳拍档：Reflect—拦截 js 对象操作 (15:13)
• 视频：4-8 总结 (01:51)

第5章 响应系统 – 初见 reactivity 模块16 节 | 122分钟

reactive 函数是响应性的核心函数之一。本章将讲解 reactive 函数是如何构建响应性的、vue 3对它的处理是什么、我们又应该如何实现它。

收起列表

• 视频：5-1 前言 (01:55)
• 视频：5-2 源码阅读：reactive 的响应性，跟踪 Vue 3 源码实现逻辑(1) (21:25)
• 视频：5-3 源码阅读：reactive 的响应性，跟踪 Vue 3 源码实现逻辑(2) (17:03)
• 视频：5-4 框架实现：构建 reactive 函数，获取 proxy 实例 (12:57)
• 视频：5-5 框架实现：什么是 WeakMap？它和 Map 有什么区别？ (09:19)
• 视频：5-6 框架实现：createGetter && createSetter (09:33)
• 视频：5-7 热更新的开发时：提升开发体验 (03:14)
• 视频：5-8 框架实现：构建 effect 函数，生成 ReactiveEffect 实例 (07:02)
• 视频：5-9 框架实现：track && trigger (05:57)
• 视频：5-10 框架实现：构建 track 依赖收集函数 (05:38)
• 视频：5-11 框架实现：构建 trigger 触发依赖 (03:47)
• 视频：5-12 总结：单一依赖的 reactive (03:56)
• 视频：5-13 功能升级：响应数据对应多个 effect (04:38)
• 视频：5-14 框架实现：构建 Dep 模块，处理一对多的依赖关系 (08:18)
• 视频：5-15 reactive 函数的局限性 (05:10)
• 视频：5-16 总结 (01:26)

第6章 响应系统 – ref 的响应性9 节 | 65分钟

reactive 函数存在一定的不足。那么，本章将讲解ref 函数是如何弥补的这种不足的、为什么 ref 必须要通过 .value 获取数据、为什么 ref 解构之后不会失去响应性、Ref 和 reactive 之间又存在什么关系。

收起列表

• 视频：6-1 前言 (01:06)
• 视频：6-2 源码阅读：ref 复杂数据类型的响应性(1) (15:30)
• 视频：6-3 源码阅读：ref 复杂数据类型的响应性(2) (12:52)
• 视频：6-4 框架实现：ref 函数 – 构建复杂数据类型的响应性 (10:59)
• 视频：6-5 总结：ref 复杂数据类型的响应性 (01:48)
• 视频：6-6 源码阅读：ref 简单数据类型的响应性 (11:11)
• 视频：6-7 框架实现：ref 函数 – 构建简单数据类型的响应性 (05:39)
• 视频：6-8 总结：ref 简单数据类型响应性 (02:45)
• 视频：6-9 总结 (02:49)

第7章 响应系统 – watch && computed15 节 | 175分钟

响应性的变化总是及时的？那么是否存在惰性的响应性呢？ Vue 中所谓的调度系统又是什么意思？Watch 和 computed 在源码层存在什么样的区别？它们有和 reactive 存在什么差异呢？

收起列表

• 视频：7-1 开篇 (01:04)
• 视频：7-2 源码阅读：computed 的响应性，跟踪 Vue 3 源码实现逻辑(1) (15:53)
• 视频：7-3 源码阅读：computed 的响应性，跟踪 Vue 3 源码实现逻辑(2) (16:36)
• 视频：7-4 框架实现：构建 ComputedRefImpl ，读取计算属性的值 (10:32)
• 视频：7-5 框架实现：computed 的响应性：初见调度器，处理脏的状态 (10:21)
• 视频：7-6 框架实现：computed 的缓存性 (24:23)
• 视频：7-7 总结：computed 计算属性 (01:18)
• 视频：7-8 源码阅读：响应性的数据监听器 watch，跟踪源码实现逻辑(1) (19:40)
• 视频：7-9 源码阅读：响应性的数据监听器 watch，跟踪源码实现逻辑(2) (17:13)
• 视频：7-10 框架实现：深入 scheduler 调度系统实现机制 (25:26)
• 视频：7-11 框架实现：初步实现 watch 数据监听器 (18:57)
• 视频：7-12 问题分析：watch 下的依赖收集原则 (05:24)
• 视频：7-13 框架实现：完成 watch 数据监听器的依赖收集 (03:31)
• 视频：7-14 总结：watch 数据侦听器 (01:52)
• 视频：7-15 总结 (02:07)

第8章 runtime 运行时 – 运行时核心设计原则6 节 | 43分钟

在构建运行时之前，我们需要了解的基础概念，比如：DOM 树和虚拟 DOM 树的关系，render 函数和 h 函数的关系，运行时的核心设计原则…

收起列表

• 视频：8-1 前言 (02:47)
• 视频：8-2 HTML DOM 节点树与虚拟 DOM 树 (09:56)
• 视频：8-3 挂载与更新 (12:35)
• 视频：8-4 h 函数 与 render 函数 (05:29)
• 视频：8-5 运行时核心设计原则 (10:36)
• 视频：8-6 总结 (00:40)

第9章 runtime 运行时 – 构建 h 函数，生成 Vnode 13 节 | 108分钟

h 函数作为运行时的核心函数，我们应该如何进行构建。Vnode 中对 Element、component、Text、Comment、Fragment 又如何进行划分？

收起列表

• 视频：9-1 前言 (01:44)
• 视频：9-2 阅读源码：初见 h 函数，跟踪 Vue 3 源码实现基础逻辑(1) (10:39)
• 视频：9-3 阅读源码：初见 h 函数，跟踪 Vue 3 源码实现基础逻辑(2) (14:57)
• 视频：9-4 框架实现：构建 h 函数，处理 ELEMENT + TEXT_CHILDREN 场景 (19:27)
• 视频：9-5 源码阅读：h 函数，跟踪 ELEMENT + ARRAY_CHILDREN 场景下的源码实现 (12:22)
• 视频：9-6 框架实现：构建 h 函数，处理 ELEMENT + ARRAY_CHILDREN 场景 (04:24)
• 视频：9-7 源码阅读：h 函数，组件的本质与对应的 VNode (10:32)
• 视频：9-8 框架实现：处理组件的 VNode (06:03)
• 视频：9-9 源码阅读：h 函数，跟踪 Text 、 Comment、Fragment 场景 (07:54)
• 视频：9-10 框架实现：实现剩余场景 Text 、 Comment、Fragment (03:17)
• 视频：9-11 源码阅读：对 class 和 style 的增强处理 (08:19)
• 视频：9-12 框架实现：完成虚拟节点下的 class 和 style 的增强 (05:56)
• 视频：9-13 总结 (02:11)

第10章 runtime 运行时 – 构建 renderer 渲染器

渲染器是运行时最核心的内容，针对不同的 Vnode 渲染器如何进行处理。在浏览器端和 SSR 端这些不同的宿主环境下， 节点的挂载又是如何进行呢？

第11章 runtime 运行时 – 组件的设计原理与渲染方案

组件是 vue 中非常重要的一块内容，值得我们花费一个单独的模块进行讲解。对组件而言，他不光包含了 render 的渲染函数，它还额外包含了 data 响应性数据、生命周期钩子等内容，针对于这么复杂的场景，vue 是如何进行设计的？我们又应该如何处理呢？这些都会在本章进行讲解…

第12章 runtime 运行时 – diff 算法核心实现

diff 算法是 渲染器的核心算法，它会在什么场景下进行执行？整个的 diff 逻辑是如何运转的？最长递增子序列指的又是什么？学完本章，以上内容再也难不到你。

第13章 compiler 编译器 – 编译时核心设计原则

编译器是 vue 中最后一个大模块，里面涉及到了一些冷僻的概念和复杂的逻辑。所以想要学习编辑器，那么我们需要先站在足够高的“地方” 俯视整个编辑器逻辑，掌握它的核心执行规律。

第14章 compiler 编译器 – 构建 compile 编译器

AST 抽象语法树、JavaScript AST、render 函数生成。在我们了解了整个编译的大步骤之后，接下来我们就需要深入各个步骤，来掌握编译器的执行过程了。

第15章 compiler 编译器 – 深入编辑器处理逻辑（困难）

仅仅掌握一个基础的编译器，可能并不能满足大家的胃口。所以在本章中，我们将深入编译器逻辑，从响应性处理、多层渲染、指令这三个方面入手，帮助大家深入编译器逻辑。

第16章 运行时 + 编译时 – 合并 vue 处理逻辑

三大模块的合并策略，助你得到一个属于自己的 vue 3 框架

第17章 课程总结

本章是课程的最后一节了，到此课程就完结了，武功秘籍已经传授给大家了，后面大家就要自己闯荡江湖了。