small-vue

手写 vue3 的核心逻辑

Why

vue3 核心源码，帮助开发者深入理解 vue，了解实现原理，源码库中有很多逻辑是用于处理边缘情况或兼容性，

不利于学习，而此项目就是把 vue3 源码中最核心的逻辑剥离出来，只留下了核心逻辑，并添加了注释方便阅读。

Tasking

reactivity

• reactive 的实现
• track 依赖收集
• trigger 触发依赖
• 支持 effect.scheduler
• 支持 effect.stop
• readonly 的实现
• 支持 isReactive
• 支持 isReadonly
• 支持嵌套 reactive
• 支持嵌套 readonly
• 支持 shallowReactive
• 支持 shallowReadonly
• 支持 isProxy
• ref 的实现
• 支持 isRef
• 支持 unref
• 支持 toRaw
• 支持 proxyRefs
• computed 的实现

runtime-core

• 支持 element 类型
• 支持 Text 类型节点
• 支持 Fragment 类型节点
• h 函数
• createVNode
• vnode patch
• diff 算法 双端比较
• 支持 component
• 支持 emit
• 支持 provide/inject
• 支持 getCurrentInstance
• 支持 slots
• 支持 nextTick
• 支持 lifecycle
• 支持 setup 函数

runtime-dom

• 支持 custom renderer
• 支持 patchProp
• 支持 nodeOps
• render 函数
• createApp 函数

todo

compiler-core

Start

# install
pnpm install

# develop
pnpm dev

Test

执行 pnpm test 可以跑测试，如果你使用的是 vscode 建议安装 Jest runner 插件，Jest runner 可以帮助你在 vscode 中更方便的进行断点调试。

推荐使用 Jest Runner

Example

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

推荐使用 Live Server