88
99[ B 站] ( https://www.bilibili.com/video/BV1Zy4y1J73E ) 提供了视频讲解使用方式
1010
11- 历经半年我把这个项目做成了一套系列视频课
12-
13- [ 【课程介绍】] ( https://www.bilibili.com/video/BV16Z4y1r7Wp?spm_id_from=333.999.0.0 )
14-
15- 课程的目标是通过构建自己的 mini-vue3 (同这个库一个复杂级别)来深入学习理解 vue3 源码
16-
17- 只有手写一遍,才能真正的掌握源码
18-
19- 进阶高级前端的编程思想有哪些
20-
21- 如何掌握 Vue3 源码原理实现
22-
23- 面试如何脱颖而出
24-
25- 帮你解决以上痛点问题 [ 胜利]
26-
27- vx:cuixr1314
28-
29- 备注一下: github mini-vue
30-
3111## Why
3212
3313当我们需要深入学习 vue3 时,我们就需要看源码来学习,但是像这种工业级别的库,源码中有很多逻辑是用于处理边缘情况或者是兼容处理逻辑,是不利于我们学习的。
@@ -114,7 +94,7 @@ pnpm build
11494#### 关键函数调用图
11595
11696
117- ![ 关键函数调用图2] ( https://user-gold-cdn.xitu.io/2020/6/22/172dc08840e25b42?w=1816&h=934&f= png&s=550722 )
97+ ![ 关键函数调用图2] ( https://images-1252602850.cos.ap-beijing.myqcloud.com/20220927170658. png )
11898
11999> 可以基于函数名快速搜索到源码内容
120100
@@ -131,3 +111,87 @@ pnpm build
131111
132112> 可以基于函数名快速搜索到源码内容
133113
114+
115+
116+ ### 从零到一实现一遍
117+
118+ 自从有了 mini-vue 之后 很多同学都问我 能不能带着他从零到一敲一遍
119+
120+ 因为对于源码的学习来讲 看在多遍也不如自己写一遍
121+
122+ 为此我把 mini-vue 做成了一套视频课 从零到一带着大家实现一遍 不跳过任何一行代码
123+
124+ 当然除了功能上的实现还有编程思想融入到了课程内
125+
126+ 比如 TDD、小步走、重构手法、TPP
127+
128+ > TDD 测试驱动开发 影响了我整个技术生涯 可以说在我认识到 TDD 之后 技术才有了质的飞跃
129+
130+ 课程目录如下:
131+
132+ 1 . vue3 源码结构的介绍
133+ 2 . reactivity 的核心流程
134+ 3 . runtime-core 初始化的核心流程
135+ 4 . runtime-core 更新的核心流程
136+ 5 . setup 环境 -> 集成 jest 做单元测试 & 集成 test
137+ 6 . 实现 effect 返回 runner
138+ 7 . 实现 effect 的 scheduler 功能
139+ 8 . 实现 effect 的 stop 功能
140+ 9 . 实现 readonly 功能
141+ 10 . 实现 isReactive 和 isReadonly
142+ 11 . 优化 stop 功能
143+ 12 . 实现 reactive 和 readonly 嵌套对象转换功能
144+ 13 . 实现 shallowReadonly 功能
145+ 14 . 实现 isProxy 功能
146+ 15 . 实现 isProxy 功能
147+ 16 . 实现 ref 功能
148+ 17 . 实现 isRef 和 unRef 功能
149+ 18 . 实现 proxyR 功能
150+ 19 . 实现 computed 计算属性功能
151+ 20 . 实现初始化 component 主流程
152+ 21 . 实现 rollup 打包
153+ 22 . 实现初始化 element 主流程
154+ 23 . 实现组件代理对象
155+ 24 . 实现 shapeFlags
156+ 25 . 实现注册事件功能
157+ 26 . 实现组件 props 功能
158+ 27 . 实现组件 emit 功能
159+ 28 . 实现组件 slots 功能
160+ 29 . 实现 Fragment 和 Text 类型节点
161+ 30 . 实现 getCurrentInstance
162+ 31 . 实现依赖注入功能 provide/inject
163+ 32 . 实现自定义渲染器 custom renderer
164+ 33 . 更新 element 流程搭建
165+ 34 . 更新 element 的props
166+ 35 . 更新 element 的 children
167+ 36 . 双端对比 diff 算法1
168+ 37 . 双端对比 diff 算法2 - key 的作用
169+ 38 . 双端对比 diff 算法3 - 最长子序列的作用
170+ 39 . 学习尤大解决 bug 的处理方式
171+ 40 . 实现组件更新功能
172+ 41 . 实现 nextTick 功能
173+ 42 . 编译模块概述
174+ 43 . 实现解析插值功能
175+ 44 . 实现解析 element 标签
176+ 45 . 实现解析 text 功能
177+ 46 . 实现解析三种联合类型 template
178+ 47 . parse 的实现原理&有限状态机
179+ 48 . 实现 transform 功能
180+ 49 . 实现代码生成 string 类型
181+ 50 . 实现代码生成插值类型
182+ 51 . 实现代码生成三种联合类型
183+ 52 . 实现编译 template 成 render 函数
184+ 53 . 实现 monorepo & 使用 vitest 替换 jest
185+
186+ 课程内部包含了 vue3 的三大核心模块:reactivity、runtime 以及 compiler 模块
187+
188+ 等你自己手写一遍之后 在去看 vue3 源码或者再去看分析解析 vue3 源码的书籍时你会有不同的体验
189+
190+ 除此之外 还录制了课程介绍以及课程试听课
191+ - [ 课程介绍] ( https://www.bilibili.com/video/BV16Z4y1r7Wp )
192+ - [ 试听课] ( https://www.bilibili.com/video/BV1R341177P7 )
193+ - [ 购买链接] ( https://cua.h5.xeknow.com/s/xDWLc )
194+
195+ > 可以直接购买 也可以加我 wx: cuixr1314 来咨询这门课是否合适你
196+
197+ 除了课程内容以外 还有专门的社群来答疑大家在学习上的问题 😊
0 commit comments