Skip to content

Latest commit

 

History

History
66 lines (38 loc) · 1.76 KB

README.md

File metadata and controls

66 lines (38 loc) · 1.76 KB

mini-vue

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

Usage

B 站 提供了视频讲解使用方式

Why

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

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

How

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

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

Tasking

  • 可初始化
    • 初始化 props
    • setup 可获取 props 和 context
    • 初始化 slots
  • 可 update
    • Element 类型
    • Component 类型
  • nextTick 的实现

build

yarn build

example

直接打开 example/index.html 即可

初始化

流程图

初始化流程图

关键函数调用图

关键函数调用图1

关键函数调用图2

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

update

流程图

update流程图

关键函数调用图

update关键函数调用图

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