1
1
# coderwei-mini-vue3
2
2
3
- 手写 vue3 核心源码,理解其原理 by myself
3
+ 手写 vue3 核心源码,理解其原理 by myself。
4
+
5
+ 项目包含大量注释,在核心且具有跳跃性的点进行了注释,站着阅读者的视角,特别是关联其他模块某个方法or用到其他
6
+ 方法处理的结果,在该位置备注处理函数名及函数位置。保证每个阅读者都能跟着流程走完能够在心里对vue的整个流程有大致的认知。
7
+
8
+ 无论是应付面试,还是希望通过有一个跷板进入vue3源码的世界,希望本项目都能够给到你帮助。项目还在持续更新中,力争完成vue的所有核心逻辑,进度在功能清单。如果有任何意见可以在issue中提出。
9
+
10
+ ## 🕳️ 声明
11
+ 项目是通过阅读[ vue3] ( https://github.com/vuejs/core/tree/main ) 源码,函数名、代码组织方式都与vue3官方保持一致,抽离一切非vue的核心逻辑。** 如果大家在阅读过程中发现任何问题,欢迎在issue中提出,同时也欢迎大家提交PR。当然如果在阅读过程中有什么疑惑,也欢迎在issue中提出。**
12
+
13
+ ## 🙌 使用方式
14
+
15
+ 项目采取monorepo结构,打包入口和打包出口已配置好,甚至包含我进行测试的example和打包后的文件,可以直接去/packages/vue/example直接运行index.html文件
16
+
17
+ 当然也可以选择自己打包
18
+ ~~~ shell
19
+ npm run build
20
+ yarn build
21
+ pnpm run build
22
+ nr build
23
+ ~~~
24
+ ## 🗯️ 插件
25
+ 1 . 这里推荐大家使用[ ni] ( https://github.com/antfu/ni )
26
+
27
+ 2 . 在运行index.html文件的时候同样推荐大家安装vscode插件[ Live Server] ( https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer )
28
+
4
29
5
- ## 🙌 目的
6
- 我想进大厂
7
30
8
31
## ✏ 相关参考
9
- [ Vue3 核心原理代码解构] ( https://juejin.cn/column/7089244418703622175 )
32
+ 1 . [ Vue3 核心原理代码解构] ( https://juejin.cn/column/7089244418703622175 )
10
33
11
- [ 崔学社] ( https://github.com/cuixiaorui/mini-vue )
34
+ 2 . [ 崔学社] ( https://github.com/cuixiaorui/mini-vue )
12
35
13
- [ Vue.js 的设计与实现] ( https://item.jd.com/13611922.html )
36
+ 3 . [ Vue.js 的设计与实现] ( https://item.jd.com/13611922.html )
14
37
15
38
## 🛠 功能清单
16
39
17
- reactivity 部分
40
+ ### reactivity 部分
18
41
- [x] 实现 effect & reactive 依赖收集和依赖触发
19
42
- [x] 实现 effect 返回 runner
20
43
- [x] 实现 effect 的 scheduler 功能
@@ -34,7 +57,7 @@ reactivity 部分
34
57
- [x] 实现 toRef 功能
35
58
- [x] 实现 toRefs 功能
36
59
37
- runtime-core 部分
60
+ ### runtime-core 部分
38
61
- [x] 实现初始化 component 主流程
39
62
- [x] 实现初始化 element 主流程 (通过递归 patch 拆箱操作,最终都会走向 mountElement 这一步)
40
63
- [x] 实现组件代理对象 (instance.proxy 解决` render() ` 函数的 this 指向问题)
@@ -68,23 +91,40 @@ runtime-core 部分
68
91
- [ ] 实现 Suspense 组件
69
92
- [x] 实现 vue3的生命周期
70
93
71
- runtime-dom
94
+ ### runtime-dom
72
95
- [x] 实现浏览器端的渲染逻辑(插入节点、删除节点、更新节点等等)
73
96
- [ ] 实现 Transition 组件
74
97
- [ ] 实现 TransitionGroup 组件
75
98
76
- compiler-core 部分
99
+ ### compiler-core 部分
77
100
- [x] 实现 parse 模块
78
101
- [x] 实现 transform 模块
79
102
- [x] 实现 codegen 模块
80
103
- [x] 定义统一的出口(定义 baseCompiler 函数)
81
104
82
- 兼容vue2部分
105
+ ### 兼容vue2部分
83
106
- [ ] 兼容options api
84
107
- [ ] 兼容vue2的生命周期 (beforeCreate、created等)
85
108
109
+ ### 内置指令
110
+ - [ ] v-text
111
+ - [ ] v-html
112
+ - [ ] v-show
113
+ - [ ] v-if
114
+ - [ ] v-else
115
+ - [ ] v-else-if
116
+ - [ ] v-for
117
+ - [ ] v-on
118
+ - [ ] v-bind
119
+ - [ ] v-model
120
+ - [ ] v-slot
121
+ - [ ] v-pre
122
+ - [ ] v-once
123
+ - [ ] v-memo
124
+ - [ ] v-cloak
125
+
86
126
87
- monorepo
127
+ ### monorepo
88
128
- [x] 使用monorepo重构整个项目
89
129
- [x] 使用vitest进行TDD测试
90
130
0 commit comments