https://github.com/heycn/mini-vue3
从零实现 Vue3 过程 ( Help you learn more efficiently vue3 source code )
https://github.com/heycn/mini-vue3
typescript vue3 vue3-source
Last synced: 3 months ago
JSON representation
从零实现 Vue3 过程 ( Help you learn more efficiently vue3 source code )
- Host: GitHub
- URL: https://github.com/heycn/mini-vue3
- Owner: heycn
- Created: 2023-02-10T01:53:27.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-02-10T02:38:05.000Z (over 2 years ago)
- Last Synced: 2024-12-28T22:29:46.003Z (5 months ago)
- Topics: typescript, vue3, vue3-source
- Homepage:
- Size: 4.88 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
mini-vue3
从零实现 vue3 过程 ( 用于深入学习 vue3)
## 为什么做这件事
最近，我的项目中使用到 `vue3`，但工作中更多使用的是 `react`，本着 `将技术吃透` 的理念，也看了 `vue` 相关的书籍，例如 `《Vue.js 设计与实现》`，但是最后发现一个问题：整个过程都是在「被动学习」，并没有没有「主动输出」，这种学习效果是比较差的，知识容易遗忘。
而我比较推崇 `费曼学习法` 的学习方式 —— 把复杂的知识简单化，以教代学，让输出倒逼输入。
一次偶然的机会，我在 `bilibili` 遇到了 [阿崔cxr](https://space.bilibili.com/175301983/?spm_id_from=333.999.0.0)，了解了他的 `mini-vue` 课程后，我对 `崔老师` 的一句话大为触动：`「掌握源码最有效的学习方法就是手写一遍！」`，我觉得这句话说的太对了，于是我便购买了他的课程，并且沉淀了每一集的内容，经过独立思考后输出了一个自己的 [mini-vue3](https://github.com/heycn/mini-vue3)，并且将实现过程的 `心得` 总结成了一篇篇博客
这样的学习过程就有了大量的「自我思考」，学习效果会相对好很多，而且我将其过程总结成了 `博客`，当不可避免地出现 `遗忘` 时，我回去看看我的博客，便能想起我当初的「心路历程」，这个学习方法我是从 [方应杭](https://www.zhihu.com/people/zhihusucks) 那里学到的 —— `「内存是有限的，当内存不够用的时候，我们就要借助外存」`。
## 我将如何做这件事
基于 vue3 的功能点，一点一点的拆分出来。
代码命名会保持和源码中的一致，方便通过命名去源码中查找逻辑。
TDD 测试驱动开发、小步走、重构手法、TPP...
### TODO
#### runtime-core
- [ ] 支持组件类型
- [ ] 支持 element 类型
- [ ] 初始化 props
- [ ] setup 可获取 props 和 context
- [ ] 支持 component emit
- [ ] 支持 proxy
- [ ] 可以在 render 函数中获取 setup 返回的对象
- [ ] nextTick 的实现
- [ ] 支持 getCurrentInstance
- [ ] 支持 provide/inject
- [ ] 支持最基础的 slots
- [ ] 支持 Text 类型节点
- [ ] 支持 $el api
- [ ] 支持 watchEffect
#### reactivity
目标是用自己的 reactivity 支持现有的 demo 运行
- [ ] reactive 的实现
- [ ] ref 的实现
- [ ] readonly 的实现
- [ ] computed 的实现
- [ ] track 依赖收集
- [ ] trigger 触发依赖
- [ ] 支持 isReactive
- [ ] 支持嵌套 reactive
- [ ] 支持 toRaw
- [ ] 支持 effect.scheduler
- [ ] 支持 effect.stop
- [ ] 支持 isReadonly
- [ ] 支持 isProxy
- [ ] 支持 shallowReadonly
- [ ] 支持 proxyRefs
### compiler-core
- [ ] 解析插值
- [ ] 解析 element
- [ ] 解析 text
### runtime-dom
- [ ] 支持 custom renderer
### runtime-test
- [ ] 支持测试 runtime-core 的逻辑
### infrastructure
- [ ] support monorepo with pnpm
### build
```bash
pnpm build
```
## 如何使用
### example
通过 server 的方式打开 packages/vue/example/\* 下的 index.html 即可
> 推荐使用 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)