这不是一个高冷、不接地气的源码课!而是一个从开发者实际工作角度出发,结合 Vue 3 的设计机制,通过产出一个精简版 Vue 3 框架的方式,让大家可以站在 Vue 3 源码设计者的角度,俯视所有业务场景,彻底搞清楚每一行 Vue 代码背后,Vue 都做了什么!课程的核心设计原则:让更多的人,以更轻松的方式,学习Vue 3 源码!

第1章 课程导读
1-1 课程导读 (09:39)
第2章 框架设计前瞻 – 框架设计中的一些基本概念
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源码结构 – 搭建框架雏形
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章 响应系统 – 响应系统的核心设计原则
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 模块
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 的响应性
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 && computed
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 运行时 – 运行时核心设计原则
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
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 渲染器
10-1 前言 (02:36)
10-2 源码阅读:初见 render 函数,ELEMENT 节点的挂载操作 (20:54)
10-3 框架实现:构建 renderer 基本架构 (17:26)
10-4 框架实现:基于 renderer 完成 ELEMENT 节点挂载 (08:09)
10-5 框架实现:合并渲染架构,得到可用的 render 函数 (09:31)
10-6 源码阅读:渲染更新,ELEMENT 节点的更新操作 (11:51)
10-7 框架实现:渲染更新,ELEMENT 节点的更新实现 (17:55)
10-8 源码阅读:新旧节点不同元素时,ELEMENT 节点的更新操作 (07:32)
10-9 框架实现:处理新旧节点不同元素时,ELEMENT 节点的更新操作 (05:01)
10-10 框架实现:删除元素,ELEMENT 节点的卸载操作 (03:18)
10-11 源码阅读:class 属性和其他属性的区分挂载 (15:31)
10-12 深入属性挂载:HTML Attributes 和 DOM Properties (12:25)
10-13 框架实现:区分处理 ELEMENT 节点的各种属性挂载 (05:20)
10-14 源码阅读:ELEMENT 节点下, style 属性的挂载和更新 (12:08)
10-15 框架实现:ELEMENT 节点下, style 属性的挂载和更新 (05:47)
10-16 源码阅读:ELEMENT 节点下,事件的挂载和更新 (21:07)
10-17 深入事件更新:vue event invokers (09:41)
10-18 框架实现:ELEMENT 节点下,事件的挂载和更新 (06:37)
10-19 局部总结:ELEMENT 节点的挂载、更新、props 打补丁等行为总结 (01:46)
10-20 源码阅读:renderer 渲染器下,Text 节点的挂载、更新行为 (06:57)
10-21 框架实现:renderer 渲染器下,Text 节点的挂载、更新行为 (05:24)
10-22 源码阅读:renderer 渲染器下,Comment 节点的挂载行为 (02:42)
10-23 框架实现:renderer 渲染器下,Comment 节点的挂载行为 (03:22)
10-24 源码阅读:renderer渲染器下, Fragment 节点的挂载、更新行为 (07:28)
10-25 框架实现:renderer渲染器下, Fragment 节点的挂载、更新行为 (07:48)
10-26 总结 (02:52)
第11章 runtime 运行时 – 组件的设计原理与渲染方案
11-1 前言 (02:04)
11-2 源码阅读:无状态基础组件挂载逻辑 (16:57)
11-3 源码阅读:无状态基础组件挂载逻辑 (13:20)
11-4 框架实现:完成无状态基础组件的挂载逻辑 (12:43)
11-5 源码阅读:无状态基础组件更新逻辑 (06:57)
11-6 局部总结:无状态组件的挂载、更新、卸载总结 (02:03)
11-7 源码阅读:有状态的响应性组件挂载逻辑 (16:19)
11-8 框架实现:有状态的响应性组件挂载逻辑 (03:25)
11-9 源码阅读:组件生命周期回调处理逻辑 (19:45)
11-10 框架实现:组件生命周期回调处理逻辑 (08:06)
11-11 源码阅读:生命回调钩子中访问响应性数据 (07:27)
11-12 框架实现:生命回调钩子中访问响应性数据 (02:19)
11-13 源码阅读:响应性数据改变,触发组件的响应性变化 (10:22)
11-14 框架实现:响应性数据改变,触发组件的响应性变化 (03:35)
11-15 源码阅读:composition API ,setup 函数挂载逻辑 (11:27)
11-16 框架实现:composition API ,setup 函数挂载逻辑 (05:12)
11-17 总结 (02:47)
第12章 runtime 运行时 – diff 算法核心实现
12-1 前言 (03:40)
12-2 前置知识:VNode 虚拟节点 key 属性的作用 (04:44)
12-3 源码阅读:场景一:自前向后的 diff 对比 (13:57)
12-4 框架实现:场景一:自前向后的 diff 对比 (07:34)
12-5 源码阅读:场景二:自后向前的 diff 对比 (06:36)
12-6 框架实现:场景二:自后向前的 diff 对比 (03:03)
12-7 源码阅读:场景三:新节点多余旧节点时的 diff 比对 (11:53)
12-8 框架实现:场景三:新节点多余旧节点时的 diff 比对 (03:04)
12-9 源码阅读:场景四:旧节点多于新节点时的 diff 比对 (03:50)
12-10 框架实现:场景四:旧节点多于新节点时的 diff 比对 (01:33)
12-11 局部总结:前四种 diff 场景的总结与乱序场景 (06:01)
12-12 前置知识:场景五:最长递增子序列 (11:48)
12-13 源码逻辑:场景五:求解最长递增子序列 (32:28)
12-14 源码阅读:场景五:乱序下的 diff 比对 (19:03)
12-15 源码阅读:场景五:乱序下的 diff 比对 (28:34)
12-16 框架实现:场景五:乱序下的 diff 比对 (06:55)
12-17 总结 (05:35)
第13章 compiler 编译器 – 编译时核心设计原则
13-1 前言 (07:45)
13-2 模板编译的核心流程 (03:44)
13-3 抽象语法树 – AST (05:49)
13-4 AST 转化为 JavaScript AST ,获取 codegenNode (07:04)
13-5 JavaScript AST 生成 render 函数代码 (05:08)
13-6 总结 (01:10)
持续更新中。。。

已经更新完结

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。