版本：v3.3.4
在进入源码的阅读之前，我们先来了解下vue3源码的架构，以及使用到的工具，对vue3源码架构有一个整体的认识。
vue3 外层目录结构
GitHub上vue3源码在core目录下，clone到本地后进入core目录
git clone https://github.com/vuejs/core.git
在终端执行 tree -aI ".git*|.vscode" -C -L 1 获取目录结构：
tree -aI ".git*|.vscode" -C -L 1
├── .eslintrc.cjs // ESLint 代码风格检查工具的配置文件
├── .git // Git 文件夹
├── .github // 存放 GitHub 相关的配置文件和模板文件
├── .gitignore // Git 忽略文件的配置文件
├── .prettierignore // Prettier 格式化工具忽略文件的配置文件
├── .prettierrc // 代码格式化 Prettier 的配置文件
├── .vscode // VS Code 编辑器的配置文件夹
├── BACKERS.md // 支持者列表
├── CHANGELOG.md // 版本变更日志
├── LICENSE // 软件许可证
├── README.md // 项目说明文档
├── SECURITY.md // 安全相关的信息
├── changelogs // 存放版本变更日志的文件夹
├── netlify.toml // Netlify 部署工具的配置文件
├── package.json // 项目依赖和脚本的配置文件
├── packages // 存放项目中所有的包或模块
├── pnpm-lock.yaml // pnpm 包管理器的依赖锁定文件
├── pnpm-workspace.yaml // pnpm 包管理器的工作区配置文件
├── rollup.config.js // Rollup 打包工具的配置文件
├── rollup.dts.config.js // Rollup 打包工具用于生成 TypeScript 类型声明文件的配置文件
├── scripts // 存放脚本文件的文件夹
├── tsconfig.build.json // 用于编译打包后的代码的 TypeScript 配置文件
├── tsconfig.json // 项目 TypeScript 配置文件
├── vitest.config.ts // Vitest 测试工具的基础配置文件
├── vitest.e2e.config.ts // Vite 测试工具的端到端测试配置文件
└── vitest.unit.config.ts // Vite 构建工具的单元测试配置文件
上面用到的一些工具中，使用了 pnpm 包管理工具，在安装依赖时需要使用 pnpm install 命令，使用 npm 或 yarn 会报错。
packages 源码目录结构
vue3的源码在packages目录下，我们还是执行 tree -aI ".git*|.vscode" -C -L 1 命令获取目录结构：
cd packages
tree -aI ".git*|.vscode" -C -L 1
├── compiler-core // 核心编译模块，抽象语法树和渲染桥接实现
├── compiler-dom // DOM的实现
├── compiler-sfc // Vue单文件组件(.vue)的实现
├── compiler-ssr // 服务端渲染编译器的实现
├── dts-test // TypeScript 类型声明测试
├── global.d.ts // 全局 TypeScript 类型声明文件
├── reactivity // 响应式系统的实现
├── reactivity-transform // 实验性代码，会在 3.4 中从 Vue 核心中删除
├── runtime-core // 程序运行时的实现
├── runtime-dom // 程序运行时(即程序被编译之后)的DOM处理
├── runtime-test // 运行时的测试
├── server-renderer // 服务端渲染的实现
├── sfc-playground // 服务端渲染的实现
├── shared // package 之间共享的工具库
├── template-explorer // 模板代码在线编译器
├── vue // vue编译后dist产物，不同场景的引入文件
└── vue-compat // 兼容旧版 API 的代码
compiler 模块是在编译阶段将.vue文件编译成浏览器能识别的.html文件。runtime模块则是在运行阶段对DOM进行一系列处理。reactivity 模块则是vue中的响应式处理。
模块依赖关系图
根据模块之间的调用关系，可以得出如下的模块关系图：
