mini-vue最简 Vue3 模型

mini-vue 实现了一个最简化的 vue3 模型，可用于深入学习 vue3， 更轻松地理解 vue3 的核心逻辑。

vue3 这种工业级别的库，源码中很多逻辑是用于处理边缘情况或者是兼容处理逻辑，不利于初学者学习源码。而 mini-vue 库把 vue3 源码中最核心的逻辑剥离出来，只留下核心逻辑，可帮助开发者更好地理解 Vue3 的核心逻辑。

实现过程

mini-vue 基于 vue3 的功能点，一点一点地拆分出来。代码命名保持和源码中的一致，方便大家通过命名去源码中查找逻辑。

Tasking

runtime-core

• 支持组件类型


• 支持 element 类型


• 初始化 props


• setup 可获取 props 和 context


• 支持 component emit


• 支持 proxy


• 可以在 render 函数中获取 setup 返回的对象


• nextTick 的实现


• 支持 getCurrentInstance


• 支持 provide/inject


• 支持最基础的 slots


• 支持 Text 类型节点


• 支持 $el api

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

初始化

流程图