Vue3 源码阅读与理解路线图

阅读 vue3 源码的想法一直存在，一是总感觉没有时间去阅读，二是没有头绪，网上也查阅了很多相关的文章，但是都没有一个系统的路线图，最近时间比较充裕，所以使用AI整理了一份源码阅读的大纲，下面就准备按照大纲去阅读调试。以下内容为chatgpt生成，后续再根据实际情况进行调整。

---

Vue 3 使用 TypeScript + Monorepo + 高度模块化设计（基于 Rollup + pnpm workspace），所以要有策略地读，不然会迷失。

下面是一个系统化的 学习与源码阅读大纲（含路线图），从"宏观架构"到"核心模块"再到"源码调试"。

一、准备阶段：建立阅读环境与整体认知

1.1 熟悉源码仓库结构

Vue 3 是一个 monorepo，核心目录结构如下（位于 packages/）：

vue/
├── packages/
│   ├── reactivity/        响应式系统核心（ref、reactive、effect）
│   ├── runtime-core/      虚拟 DOM + 组件系统核心逻辑
│   ├── runtime-dom/       DOM 渲染相关（patch、事件绑定）
│   ├── compiler-core/     模板编译的通用逻辑（AST 转换、codegen）
│   ├── compiler-dom/      DOM 特有的编译规则
│   ├── shared/            工具函数
│   ├── vue/               最终打包入口（整合 runtime + compiler）
│   └── template-explorer/ 模板编译调试工具

1.2 本地调试准备

git clone https://github.com/vuejs/core.git
cd core
pnpm install
pnpm build

然后用 pnpm dev 启动 playground 或用 packages/vue/examples/ 调试。

建议你在 VSCode 中使用 TS 跳转 + 源码标注笔记 的方式读。

二、第一阶段：从整体认识运行机制

🎯 目标：了解 Vue 从 "模板" → "渲染" → "更新" 的整体流程。

阅读路线（宏观层面）：

1. packages/vue/src/index.ts
   → Vue 对外暴露的 API（createApp、ref、reactive...）
2. runtime-dom
   → 渲染到浏览器的入口
3. runtime-core → 创建 App → 创建组件 → mount → render → patch → update
4. reactivity → 数据变化如何触发组件更新

三、第二阶段：响应式系统（reactivity）

🎯 这是 Vue3 的灵魂部分，可以单独运行，不依赖 DOM。

模块入口

packages/reactivity/src/

阅读顺序：

1. reactive.ts / ref.ts
   • 了解 Proxy 封装、RefImpl 类的设计
2. effect.ts
   • effect(fn) 的依赖收集与触发机制（Dep、targetMap）
3. computed.ts / watch.ts
   • 基于 effect 的派生特性
4. 调试建议 - 新建一个 reactivity-playground.ts，手动创建 reactive 对象，调试依赖收集/触发。

   TIP

   📘 推荐输出成果：

   • 画出依赖追踪（track）与触发（trigger）的流程图
   • 写出你自己的 mini-reactivity 实现

四、第三阶段：虚拟 DOM 与渲染机制（runtime-core）

🎯 组件、VNode、diff、生命周期都在这里。

模块入口

packages/runtime-core/src/

阅读顺序：

1. createRenderer.ts
   • Vue 的渲染引擎入口，定义渲染器（包括 patch、mount）
2. vnode.ts
   • 虚拟节点 VNode 的定义
3. component.ts
   • 组件实例的创建、初始化 props、setup、render
4. renderer.ts
   • 渲染器逻辑（patch、processComponent、processElement）
5. scheduler.ts
   • 异步更新机制（queueJob）
6. apiLifecycle.ts
   • 生命周期钩子实现

TIP

📘 推荐输出成果：

• 手动实现一个迷你版 renderer\

• 理解"响应式触发 → 组件 effect → render → patch"的链路

五、第四阶段：模板编译机制（compiler-core + compiler-dom）

🎯 理解 Vue 的模板是如何转成 render 函数的。

模块入口

packages/compiler-core/src/

阅读顺序：

1. parse.ts
   • 模板字符串 → AST
2. transform.ts
   • AST 转换、优化
3. codegen.ts
   • 生成渲染函数代码（h() 调用）
4. compiler-dom - 特殊平台差异（如处理指令、事件）

   TIP

   📘 推荐输出成果：

   • 试着使用 @vue/compiler-dom 手动编译模板
     js import { compile } from '@vue/compiler-dom' console.log(compile('<div></div>').code)
   • 看懂最终生成的渲染函数。

六、第五阶段：整合与打包（vue package）

🎯 理解最终如何把 runtime + compiler 打包成完整 Vue。

• 入口：packages/vue/src/index.ts
• 功能：
  • compile：模板编译函数引入
  • createApp：整合 runtime-core + runtime-dom
  • ref/reactive：暴露响应式 API

七、第六阶段：源码调试技巧

1. 用 VSCode 调试单元测试

pnpm test runtime-core

在测试中加断点（测试写得很好，是最好的文档）。

2. 用模板实验

在 playground 里修改 App.vue：

<template>
  <div>{{ count }}</div>
</template>
<script setup>
import { ref } from "vue";
const count = ref(0);
setInterval(() => count.value++, 1000);
</script>

打断点观察 reactive → effect → render → patch 的全链路。

八、阅读顺序总结（推荐循序渐进）

阶段	模块	重点文件	目标
1	vue 整体结构	vue/src/index.ts	熟悉入口
2	reactivity	effect.ts / reactive.ts	理解响应式核心
3	runtime-core	renderer.ts / component.ts	理解渲染机制
4	compiler-core	parse.ts / codegen.ts	理解模板编译
5	vue	index.ts	理解整合逻辑

九、配合学习资料

官方 https://github.com/vuejs/core

可视化 https://vue-next-template-explorer.netlify.app/

源码导读视频 HcySunYang《Vue3 源码解读》 / 小满《Vue3 核心源码解析》

Mini 实现项目 mini-vue --- 推荐跟着实现一遍