Skip to content

Commit

Permalink
docs: update redeme
Browse files Browse the repository at this point in the history
  • Loading branch information
cuixiaorui committed Jan 21, 2021
1 parent 005ee6d commit 06a29b1
Showing 1 changed file with 26 additions and 25 deletions.
51 changes: 26 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,44 +1,45 @@
## mini-vue
实现最简 vue3 模型,用于学习

### 学习思路
先整理出整个 vue3 的 happy path 来,这相当于是一个房子的框架,然后在慢慢的整理实现细节

### todo
- [ ] runtime-core
- 初始化
- [x] 流程
- [ ] 细节实现
- [ ] hook 的触发实现
- [ ] 标准化 vnode 的实现
- [ ] 初始化 props 逻辑
- [ ] 初始化 slots 逻辑
- [ ] proxy 暴露给用户的代理实现
- [ ] 给元素设置 props
- 更新
- [x] 流程
- [x] nextTick 的实现
- [ ] 细节实现
- [x] text_children 类型的 patch
- [x] array_children 类型的 patch
- [x] props 类型的 patch

实现最简 vue3 模型,用于深入学习 vue3

## Why

当我们需要深入学习 vue3 时,我们就需要看源码来学习,但是像这种工业级别的库,源码中有很多逻辑是用于处理边缘情况或者是兼容处理逻辑,是不利于我们学习的。

我们应该关注于核心逻辑,而这个库的目的就是把 vue3 源码中最核心的逻辑抛离出来,只留下核心逻辑,以供大家学习。

## How

基于 vue3 的功能点,一点一点的拆分出来。

代码命名会保持和源码中的一致,方便大家通过命名去源码中查找逻辑。

### Tasking

- [x] 可初始化
- [x] 可 update
- [x] Element 类型
- [ ] Component 类型
- [x] nextTick 的实现

### build

```shell
yarn build
```

### example

直接打开 example/index.html 即可

### 初始化

#### 流程图

![初始化流程图](https://user-gold-cdn.xitu.io/2020/7/6/1732311ea8a9142a?w=1724&h=762&f=png&s=493353)

#### 关键函数调用图

![关键函数调用图1](https://user-gold-cdn.xitu.io/2020/6/22/172dc07fc42b7d2c?w=1342&h=144&f=png&s=54200)

![关键函数调用图2](https://user-gold-cdn.xitu.io/2020/6/22/172dc08840e25b42?w=1816&h=934&f=png&s=550722)
@@ -48,11 +49,11 @@ yarn build
### update

#### 流程图
![update流程图](https://user-gold-cdn.xitu.io/2020/6/23/172e19b5cefba34e?w=3200&h=800&f=png&s=540515)

![update流程图](https://user-gold-cdn.xitu.io/2020/6/23/172e19b5cefba34e?w=3200&h=800&f=png&s=540515)

#### 关键函数调用图

![update关键函数调用图](https://user-gold-cdn.xitu.io/2020/6/23/172e19d2d42464aa?w=3300&h=1006&f=png&s=739008)

> 可以基于函数名快速搜索到源码内容

0 comments on commit 06a29b1

Please sign in to comment.