为了深入学习 Vue3，本仓库基于 TDD（测试驱动开发）和 TPP（变换优先原则）实现了一个简化版的 Vue3 模型。
你可以在这里查看笔记。
笔记记录了本仓库实现过程中的思考和重点知识点。
当我们需要深入学习 Vue3 时，往往需要去阅读 Vue3 的源码。
但是 Vue3 源码中有很多逻辑，用于处理边缘情况或兼容性处理逻辑，这使得 Vue3 源码阅读起来更加困难。
我们应该专注于核心逻辑，而该仓库的目的就是剥离 Vue3 源码中的核心逻辑，只留下核心部分。
# 克隆仓库
git clone https://github.com/NansenHo/mini-vue.git
cd mini-vue
# 安装依赖
pnpm install
# 运行单元测试
pnpm run test-unit
# 运行端到端测试
pnpm run test-e2e
pnpm run test-e2e:open
# 打包
pnpm run build用 Server 打开 example/* 目录下的 index.html 文件即可。
推荐使用 Live Server。
- TypeScript
- Vitest
- Cypress
- Rollup
runtime-core 模块:
- 支持 component 类型
- 支持 element 类型
- 支持
proxy - 可以在
render函数里获取setup返回的对象 - 支持
$elapi - 初始化
props(包括events) - 支持基础的
slots - 支持 component
emit -
setup函数能访问props和context - 支持
provide/inject - 支持
getCurrentInstance - 支持 Text 类型节点
- 实现
props更新 - 实现
nextTick - 支持
watchEffect
reactivity 模块:
- 实现
reactive - 实现
ref -
track依赖收集 -
trigger触发依赖 -
effect返回runner函数 - 支持
effect.scheduler - 支持
effect.stop - 支持
isReadonly - 支持
isReactive - 支持嵌套
reactive - 支持嵌套
readonly - 支持
isRef - 支持
unRef - 支持
proxyRefs - 实现
computed
compiler-core 模块:
- 解析插值
- 解析 element
- 解析 text