Mini Vue

从零实现一个 mini Vue 3，深入理解 Vue 3 的核心原理。

对标 Vue 3 源码（vuejs/core），覆盖 响应式系统、虚拟 DOM、渲染器、组件系统、编译器 五大核心模块。

项目架构

packages/
├── reactivity/       → 响应式系统（reactive / ref / computed / effect / watch）
├── runtime-core/     → 运行时核心（VNode / 渲染器 / 组件 / Diff）
├── runtime-dom/      → DOM 平台渲染器
├── compiler-core/    → 编译器核心（parse / transform / codegen）
└── shared/           → 公共工具函数

与 Mini React 的对照

Vue 3 核心概念	React 对应概念
reactive / ref	useState / useReducer
effect + 依赖收集	Fiber + updateQueue
VNode + patch	FiberNode + Reconciler
Diff（双端 + LIS）	Diff（单向遍历）
Slots	children / render props
provide / inject	useContext
nextTick 调度	同步/并发调度
编译器（parse → transform → codegen）	JSX 转换（Babel plugin）

课程目录

课节	内容	文档
01	搭建项目架构	01-搭建项目架构
02	实现响应式基础 - reactive	02-实现响应式基础-reactive
03	实现 effect 与依赖收集	03-实现effect与依赖收集
04	实现 ref 与 computed	04-实现ref与computed
05	实现 watch 与 watchEffect	05-实现watch与watchEffect
06	响应式进阶	06-响应式进阶
07	实现响应式的测试框架	07-实现响应式的测试框架
08	实现虚拟 DOM - VNode	08-实现虚拟DOM-VNode
09	实现渲染器 - mount 流程	09-实现渲染器-mount流程
10	实现渲染器 - update 流程	10-实现渲染器-update流程
11	实现 Diff 算法	11-实现Diff算法
12	实现自定义渲染器	12-实现自定义渲染器
13	实现组件的初始化流程	13-实现组件的初始化流程
14	实现 Props 与 Emit	14-实现Props与Emit
15	实现 Slots 机制	15-实现Slots机制
16	实现组件更新流程	16-实现组件更新流程
17	实现 provide / inject	17-实现provide-inject
18	实现生命周期 Hooks	18-实现生命周期Hooks
19	实现 nextTick 与异步调度	19-实现nextTick与异步调度
20	实现 Teleport 与 KeepAlive	20-实现Teleport与KeepAlive
21	实现编译器 - parse 模板解析	21-实现编译器-parse模板解析
22	实现编译器 - transform 转换	22-实现编译器-transform转换
23	实现编译器 - codegen 代码生成	23-实现编译器-codegen代码生成
24	实现完整流程 - compile 联调	24-实现完整流程-compile联调