minivue3

• 一个跟着催学社学vue3源码的练习项目，目标是打造一个自己的mini-vue。
• 本仓库代码基本跟着教程编写，以学习和理解思想为主，所以内部的功能实现细节与广度不及mini-vue。
• 部分功能点的代码实现缺少对多种情况的判断和细化，比如slots实现以具名作用域插槽为开发目标，代码生成缺少解析props等等

Tasking

runtime-core

• 支持组件类型
• 支持 element 类型
• 初始化 props
• setup 可获取 props
• 支持 component emit
• 可以在 render 函数中获取 setup 返回的对象
• nextTick 的实现
• 支持 getCurrentInstance
• 支持 provide/inject
• 支持最基础的 slots
• 支持 Text 类型节点
• 支持 $el api

reactivity

目标是用自己的 reactivity 支持现有的 demo 运行

• reactive 的实现
• ref 的实现
• readonly 的实现
• computed 的实现
• track 依赖收集
• trigger 触发依赖
• 支持 isReactive
• 支持嵌套 reactive
• 支持 toRaw
• 支持 effect.scheduler
• 支持 effect.stop
• 支持 isReadonly
• 支持 isProxy
• 支持 shallowReadonly
• 支持 proxyRefs
• 支持 watch
• 支持 watchEffect

compiler-core

• 解析插值
• 解析 element
• 解析 text

runtime-dom

• 支持 custom renderer

example

通过 server 的方式打开 example/* 下的 index.html 即可

从零到一实现一遍

课程目录如下:

1. vue3 源码结构的介绍
2. reactivity 的核心流程
3. runtime-core 初始化的核心流程
4. runtime-core 更新的核心流程
5. setup 环境 -> 集成 jest 做单元测试 & 集成 typescript
6. 实现 effect 返回 runner
7. 实现 effect 的 scheduler 功能
8. 实现 effect 的 stop 功能
9. 实现 readonly 功能
10. 实现 isReactive 和 isReadonly
11. 优化 stop 功能
12. 实现 reactive 和 readonly 嵌套对象转换功能
13. 实现 shallowReadonly 功能
14. 实现 isProxy 功能
15. 实现 isProxy 功能
16. 实现 ref 功能
17. 实现 isRef 和 unRef 功能
18. 实现 proxyR 功能
19. 实现 computed 计算属性功能
20. 实现初始化 component 主流程
21. 实现 rollup 打包
22. 实现初始化 element 主流程
23. 实现组件代理对象
24. 实现 shapeFlags
25. 实现注册事件功能
26. 实现组件 props 功能
27. 实现组件 emit 功能
28. 实现组件 slots 功能
29. 实现 Fragment 和 Text 类型节点
30. 实现 getCurrentInstance
31. 实现依赖注入功能 provide/inject
32. 实现自定义渲染器 custom renderer
33. 更新 element 流程搭建
34. 更新 element 的props
35. 更新 element 的 children
36. 双端对比 diff 算法1
37. 双端对比 diff 算法2 - key 的作用
38. 双端对比 diff 算法3 - 最长子序列的作用
39. 学习尤大解决 bug 的处理方式
40. 实现组件更新功能
41. 实现 nextTick 功能
42. 编译模块概述
43. 实现解析插值功能
44. 实现解析 element 标签
45. 实现解析 text 功能
46. 实现解析三种联合类型 template
47. parse 的实现原理&有限状态机
48. 实现 transform 功能
49. 实现代码生成 string 类型
50. 实现代码生成插值类型
51. 实现代码生成三种联合类型
52. 实现编译 template 成 render 函数

代码包含了 vue3 的三大核心模块：reactivity、runtime 以及 compiler 模块