vue3 源码学习

Vue3 源码学习计划（4-6周）

以“先懂设计、再拆模块、最后串流程”为核心，从基础到深入，避免直接陷入源码细节导致劝退。

第1-2周：前置准备与核心概念理解

目标：搭建环境、掌握Vue3设计思想，为读源码打基础

1. 环境与工具准备（1天）

- 克隆Vue3源码： git clone https://github.com/vuejs/core.git 

- 安装依赖： pnpm install （Vue3官方推荐pnpm）

- 熟悉目录结构：重点关注  packages  下的  reactivity （响应式）、 runtime-core （运行时核心）、 compiler-core （编译器核心）

2. 先学“为什么”：Vue3设计理念（2天）

- 理解Vue3的核心改进：Composition API、响应式重写（Proxy替代Object.defineProperty）、Tree-Shaking支持

- 阅读官方文档：Vue3 设计理念、响应式原理

3. 吃透核心概念（3-4天）

- 响应式：搞懂  Proxy / Reflect  工作机制，区分  reactive / ref / effect  的关系

- 虚拟DOM：理解Vue3的VNode结构（ packages/runtime-core/src/vnode.ts ），对比Vue2的差异

- 渲染流程：记住简化版流程“模板编译 → 生成渲染函数 → 执行渲染函数生成VNode → .patch 渲染DOM”

第3-4周：拆解核心模块（从易到难）

目标：逐个攻破核心模块，聚焦“关键逻辑”而非每行代码

模块1：响应式系统（3天）

- 入口文件： packages/reactivity/src/index.ts 

- 重点看3个核心函数：

-  reactive ：如何通过Proxy创建响应式对象，以及“深层响应”的实现

-  effect ：副作用函数的收集与触发逻辑（ track  收集依赖、 trigger  触发更新）

-  ref ：如何处理基本类型的响应式（通过  value  属性封装）

- 辅助理解：写简单Demo复现  reactive + effect  的依赖收集逻辑

模块2：运行时核心（4天）

- 入口文件： packages/runtime-core/src/index.ts 

- 重点拆解3个核心流程：

1. 实例创建： createApp  到  mount  的流程，理解  App  实例与  Component  实例的关系

2. 渲染函数执行： render  函数如何生成VNode， h  函数（创建VNode）的实现逻辑

3. VNode渲染（patch）： packages/runtime-core/src/renderer.ts  中的  patch  函数，重点看“元素节点”的创建、更新逻辑（忽略复杂的组件/插槽逻辑，先抓主线）

模块3：编译器核心（可选，2天）

- 目标：理解“模板 → 渲染函数”的编译过程，不深入AST细节

- 入口文件： packages/compiler-core/src/index.ts 

- 重点看：

- 编译的3个阶段：解析（parse，模板转AST）→ 转换（transform，AST转可执行逻辑）→ 生成（generate，AST转渲染函数字符串）

- 关键优化：静态节点标记（ _hoisted_ ）、动态节点收集，理解“编译时优化如何提升运行时性能”

第5-6周：串联流程与进阶

目标：把分散的模块串联成完整流程，解决实际疑问

1. 完整流程串联（3天）

- 从“写一个Vue组件”出发，串联全流程：

模板 → 编译器编译 → 生成渲染函数 → 运行时执行渲染函数 → 生成VNode → patch渲染DOM → 响应式数据变化 → trigger effect → 重新执行渲染函数 → 更新DOM

- 对照源码，标记每个环节对应的核心文件/函数

2. 解决高频疑问（2天）

- 为什么Vue3比Vue2快？（响应式Proxy+编译时优化+运行时patch优化）

-  setup  函数的执行时机？（组件实例创建后，渲染前）

-  ref  和  reactive  的区别？（ ref  处理基本类型， reactive  处理对象，底层都是通过  effect  收集依赖）

3. 进阶扩展（可选）

- 看  runtime-dom  模块：理解运行时核心如何适配浏览器环境（如  createRenderer  中浏览器特有的DOM操作）

- 看  composition-api  模块：理解  computed / watch  的实现逻辑（基于  effect  扩展）

学习Tips

1. 不要逐行读源码：先找“入口函数”，再顺藤摸瓜看核心逻辑，忽略工具函数、类型定义（如TS类型）

2. 用“调试法”辅助：在源码中加  console.log ，运行Vue测试用例（ pnpm run test ）或自己的Demo，观察流程

3. 借助辅助资料：遇到卡壳时，参考Vue官方文档的“深入响应式原理”“编译器原理”章节，或靠谱的源码解析文章（如Vue团队成员的分享）

4. 控制节奏：每天聚焦1个小目标（如“今天搞懂effect的依赖收集”），避免贪多