[608] Vue3源码解析，打造自己的Vue3框架 – 网盘下载从实际工作场景出发，真正掌握Vue3源码，实现技术深度与思维的双重提升！

网盘链接：

1. 课程导读

• 1-1 课程导读

2. 框架设计前瞻 – 框架设计中的一些基本概念

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

3. Vue 3源码结构 – 搭建框架雏形

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

4. 响应系统 – 响应系统的核心设计原则

• 4-1 前言
• 4-2 JS 的程序性
• 4-3 如何让你的程序变得更加“聪明”？
• 4-4 vue 2 的响应性核心 API：Object.defineProperty
• 4-5 Object.defineProperty 在设计层的缺陷
• 4-6 vue3的响应性核心 API：proxy
• 4-7 proxy的最佳拍档：Reflect—拦截 js 对象操作
• 4-8 总结

5. 响应系统 – 初见 reactivity 模块

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

6. 响应系统 – ref 的响应性

• 6-1 前言
• 6-2 源码阅读：ref 复杂数据类型的响应性(1)
• 6-3 源码阅读：ref 复杂数据类型的响应性(2)
• 6-4 框架实现：ref 函数 – 构建复杂数据类型的响应性
• 6-5 总结：ref 复杂数据类型的响应性
• 6-6 源码阅读：ref 简单数据类型的响应性
• 6-7 框架实现：ref 函数 – 构建简单数据类型的响应性
• 6-8 总结：ref 简单数据类型响应性
• 6-9 总结

7. 响应系统 – watch && computed

• 7-1 开篇
• 7-2 源码阅读：computed 的响应性，跟踪 Vue 3 源码实现逻辑(1)
• 7-3 源码阅读：computed 的响应性，跟踪 Vue 3 源码实现逻辑(2)
• 7-4 框架实现：构建 ComputedRefImpl ，读取计算属性的值
• 7-5 框架实现：computed 的响应性：初见调度器，处理脏的状态
• 7-6 框架实现：computed 的缓存性
• 7-7 总结：computed 计算属性
• 7-8 源码阅读：响应性的数据监听器 watch，跟踪源码实现逻辑(1)
• 7-9 源码阅读：响应性的数据监听器 watch，跟踪源码实现逻辑(2)
• 7-10 框架实现：深入 scheduler 调度系统实现机制
• 7-11 框架实现：初步实现 watch 数据监听器
• 7-12 问题分析：watch 下的依赖收集原则
• 7-13 框架实现：完成 watch 数据监听器的依赖收集
• 7-14 总结：watch 数据侦听器
• 7-15 总结

8. runtime 运行时 – 运行时核心设计原则

• 8-1 前言
• 8-2 HTML DOM 节点树与虚拟 DOM 树
• 8-3 挂载与更新
• 8-4 h 函数 与 render 函数
• 8-5 运行时核心设计原则
• 8-6 总结

9. runtime 运行时 – 构建 h 函数，生成 Vnode

• 9-1 前言
• 9-2 阅读源码：初见 h 函数，跟踪 Vue 3 源码实现基础逻辑(1)
• 9-3 阅读源码：初见 h 函数，跟踪 Vue 3 源码实现基础逻辑(2)
• 9-4 框架实现：构建 h 函数，处理 ELEMENT + TEXT_CHILDREN 场景
• 9-5 源码阅读：h 函数，跟踪 ELEMENT + ARRAY_CHILDREN 场景下的源码实现
• 9-6 框架实现：构建 h 函数，处理 ELEMENT + ARRAY_CHILDREN 场景
• 9-7 源码阅读：h 函数，组件的本质与对应的 VNode
• 9-8 框架实现：处理组件的 VNode
• 9-9 源码阅读：h 函数，跟踪 Text 、 Comment、Fragment 场景
• 9-10 框架实现：实现剩余场景 Text 、 Comment、Fragment
• 9-11 源码阅读：对 class 和 style 的增强处理
• 9-12 框架实现：完成虚拟节点下的 class 和 style 的增强
• 9-13 总结

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

• 10-1 前言
• 10-2 源码阅读：初见 render 函数，ELEMENT 节点的挂载操作
• 10-3 框架实现：构建 renderer 基本架构
• 10-4 框架实现：基于 renderer 完成 ELEMENT 节点挂载
• 10-5 框架实现：合并渲染架构，得到可用的 render 函数
• 10-6 源码阅读：渲染更新，ELEMENT 节点的更新操作
• 10-7 框架实现：渲染更新，ELEMENT 节点的更新实现
• 10-8 源码阅读：新旧节点不同元素时，ELEMENT 节点的更新操作
• 10-9 框架实现：处理新旧节点不同元素时，ELEMENT 节点的更新操作
• 10-10 框架实现：删除元素，ELEMENT 节点的卸载操作
• 10-11 源码阅读：class 属性和其他属性的区分挂载
• 10-12 深入属性挂载：HTML Attributes 和 DOM Properties
• 10-13 框架实现：区分处理 ELEMENT 节点的各种属性挂载
• 10-14 源码阅读：ELEMENT 节点下， style 属性的挂载和更新
• 10-15 框架实现：ELEMENT 节点下， style 属性的挂载和更新
• 10-16 源码阅读：ELEMENT 节点下，事件的挂载和更新
• 10-17 深入事件更新：vue event invokers
• 10-18 框架实现：ELEMENT 节点下，事件的挂载和更新
• 10-19 局部总结：ELEMENT 节点的挂载、更新、props 打补丁等行为总结
• 10-20 源码阅读：renderer 渲染器下，Text 节点的挂载、更新行为
• 10-21 框架实现：renderer 渲染器下，Text 节点的挂载、更新行为
• 10-22 源码阅读：renderer 渲染器下，Comment 节点的挂载行为
• 10-23 框架实现：renderer 渲染器下，Comment 节点的挂载行为
• 10-24 源码阅读：renderer渲染器下， Fragment 节点的挂载、更新行为
• 10-25 框架实现：renderer渲染器下， Fragment 节点的挂载、更新行为
• 10-26 总结

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

• 11-1 前言
• 11-2 源码阅读：无状态基础组件挂载逻辑
• 11-3 源码阅读：无状态基础组件挂载逻辑
• 11-4 框架实现：完成无状态基础组件的挂载逻辑
• 11-5 源码阅读：无状态基础组件更新逻辑
• 11-6 局部总结：无状态组件的挂载、更新、卸载总结
• 11-7 源码阅读：有状态的响应性组件挂载逻辑
• 11-8 框架实现：有状态的响应性组件挂载逻辑
• 11-9 源码阅读：组件生命周期回调处理逻辑
• 11-10 框架实现：组件生命周期回调处理逻辑
• 11-11 源码阅读：生命回调钩子中访问响应性数据
• 11-12 框架实现：生命回调钩子中访问响应性数据
• 11-13 源码阅读：响应性数据改变，触发组件的响应性变化
• 11-14 框架实现：响应性数据改变，触发组件的响应性变化
• 11-15 源码阅读：composition API ，setup 函数挂载逻辑
• 11-16 框架实现：composition API ，setup 函数挂载逻辑
• 11-17 总结

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

• 12-1 前言
• 12-2 前置知识：VNode 虚拟节点 key 属性的作用
• 12-3 源码阅读：场景一：自前向后的 diff 对比
• 12-4 框架实现：场景一：自前向后的 diff 对比
• 12-5 源码阅读：场景二：自后向前的 diff 对比
• 12-6 框架实现：场景二：自后向前的 diff 对比
• 12-7 源码阅读：场景三：新节点多余旧节点时的 diff 比对
• 12-8 框架实现：场景三：新节点多余旧节点时的 diff 比对
• 12-9 源码阅读：场景四：旧节点多于新节点时的 diff 比对
• 12-10 框架实现：场景四：旧节点多于新节点时的 diff 比对
• 12-11 局部总结：前四种 diff 场景的总结与乱序场景
• 12-12 前置知识：场景五：最长递增子序列
• 12-13 源码逻辑：场景五：求解最长递增子序列
• 12-14 源码阅读：场景五：乱序下的 diff 比对
• 12-15 源码阅读：场景五：乱序下的 diff 比对
• 12-16 框架实现：场景五：乱序下的 diff 比对
• 12-17 总结

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

• 13-1 前言
• 13-2 模板编译的核心流程
• 13-3 抽象语法树 – AST
• 13-4 AST 转化为 JavaScript AST ，获取 codegenNode
• 13-5 JavaScript AST 生成 render 函数代码
• 13-6 总结

14. compiler 编译器 – 构建 compile 编译器

• 14-1 前言
• 14-2 扩展知识：JavaScript与有限自动状态机
• 14-3 扩展知识：扫描 tokens 构建 AST 结构的方案
• 14-4 源码阅读：编译器第一步：依据模板，生成 AST 抽象语法树
• 14-5 框架实现：构建 parse 方法，生成 context 实例
• 14-6 框架实现：构建有限自动状态机解析模板，扫描 token 生成 AST 结构
• 14-7 框架实现：生成 AST，构建测试
• 14-8 扩展知识：AST 到 JavaScript AST 的转化策略和注意事项
• 14-9 源码阅读：编译器第二步：转化 AST，得到 JavaScript AST 对象
• 14-10 框架实现：转化 JavaScript AST，构建深度优先的 AST 转化逻辑
• 14-11 框架实现：构建 transformXXX 方法，转化对应节点
• 14-12 框架实现：处理根节点的转化，生成 JavaScript AST
• 14-13 扩展知识：render 函数的生成方案
• 14-14 源码阅读：编译器第三步：生成 render 函数
• 14-15 框架实现：构建 CodegenContext 上下文对象
• 14-16 框架实现：解析 JavaScript AST，拼接 render 函数
• 14-17 框架实现：新建 compat 模块，把 render 转化为 function
• 14-18 总结

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

• 15-1 前言
• 15-2 响应性数据的编辑器处理：响应性数据的处理逻辑
• 15-3 响应性数据的编辑器处理：AST 解析逻辑
• 15-4 响应性数据的编辑器处理：JavaScript AST 转化逻辑
• 15-5 响应性数据的编辑器处理：render 转化逻辑分析
• 15-6 响应性数据的编辑器处理：generate 生成 render 函数
• 15-7 响应性数据的编辑器处理：render 函数的执行处理
• 15-8 多层级模板的编辑器处理：多层级的处理逻辑
• 15-9 基于编辑器的指令(v-xx)处理：指令解析的整体逻辑
• 15-10 困难-基于编辑器的指令(v-xx)处理：AST 解析逻辑
• 15-11 困难-基于编辑器的指令(v-xx)处理：JavaScript AST ，构建 vif 转化模块
• 15-12 基于编辑器的指令(v-xx)处理：JavaScript AST ，transform 的转化逻辑
• 15-13 基于编辑器的指令(v-xx)处理：生成 render 函数
• 15-14 总结

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

• 16-1 前言
• 16-2 基于 render 渲染的 createApp 的构建逻辑
• 16-3 基于 template 渲染的 createApp 的构建逻辑
• 16-4 总结

17. 课程总结

• 17-1 总结