手写 Mini 版 Vue3,加深对 Vue3 源码的理解
# 安装依赖
pnpm i
# 开发调试
pnpm run dev:all
- reactive 的实现
- effect 的实现
- readonly 的实现
- ref 的实现
- computed 的实现
- 初始化 vue package
- 初始化 runtime-dom、runtime-core 这两个 package
- 完成 runtime-dom 中操作节点和属性的方法
- 初始化 createRender 方法
- 完成 createApp API
- 实现虚拟 DOM
- 处理 renderer 中的 patch 逻辑
- 开始处理组件 mountComponent 的流程
- 创建组件实例
- 组件实例初始化
- 初始化 props、渲染上下文代理
- 执行 setup 函数
- 处理 setup 执行结果
- 实现 h API
- 处理 App 根组件渲染流程(引入Vue原本的编译器,编译template,测试vnode)
- 完善 processElement,走通 mount 流程
- 完善 processFragment
- 调试并确保依赖收集的正确性
- 完善 update 流程之 updateElement、updateFragment
- 完善 update 流程之 patchKeyedChildren
- 测试 patchKeyedChildren 逻辑
- 完善 resolveComponent
- 完善子组件注册和挂载流程
- 完善子组件更新流程
- 异步更新机制 Scheduler
- 实现 watch、watchEffect
- 实现生命周期
- 调试DOM事件绑定、emit 派发事件
- 实现 provide / inject / app.provide
- 实现 app.use / app.component
- 规划中...
- 该项目是学习型项目,重点在于 Vue 内部逻辑的实现,TS 类型声明完善不是重点、package 打包构建不是重点。
- 该项目本质是 Vue3 源码的简化版本,为了方便以后学习和回顾 Vue3 源码逻辑,因此在变量命名和具体实现上尽可能靠近 Vue3 源码本身。