zjj19970517 / fd-custom-vue3

手写 Mini 版本 Vue3，加深自己对 Vue3 源码的理解

Custom Vue3

手写 Mini 版 Vue3，加深对 Vue3 源码的理解

Usage

# 安装依赖
pnpm i

# 开发调试
pnpm run dev:all

Fixtures

第一阶段：

• 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

第二阶段：

• 规划中...

Notes

• 该项目是学习型项目，重点在于 Vue 内部逻辑的实现，TS 类型声明完善不是重点、package 打包构建不是重点。
• 该项目本质是 Vue3 源码的简化版本，为了方便以后学习和回顾 Vue3 源码逻辑，因此在变量命名和具体实现上尽可能靠近 Vue3 源码本身。