CN / EN

mini-vue

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

Usage

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

可关注我得b 站，会不定期直播源码解读

探讨

可以和我一起探讨 vue3 的源码噢

加我的公众号：阿崔 cxr

公众号回复关键字：vx

脑图资源获取

提供了 xmind 格式的脑图

整理了所有功能的调用顺序

1. 搜索公众号: 阿崔 cxr
2. 回复关键字: 011

服务

提供一对一视频教学服务，手把手带你一起看 mini-vue 源码

可加公众号沟通

Why

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

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

How

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

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

Tasking

runtime-core

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

reactivity

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

• reactive 的实现
• track 依赖收集
• trigger 触发依赖
• 支持 isReactive
• 支持嵌套 reactive
• 支持 toRaw
• 支持 effect.scheduler
• 支持 effect.stop

build

yarn build

example

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

� 推荐使用 Live Server

初始化

流程图

关键函数调用图

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

update

流程图

关键函数调用图

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