携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情 >>
版本：3.2.31
版本：3.2.31
在进入源码的阅读之前，我们先来了解下vue3源码的架构，以及使用到的工具，对vue3源码架构有一个整体的认识。
vue3 外层目录结构
GitHub上vue3源码在core目录下，clone到本地后进入core目录，在终端执行 tree -aI ".git*|.vscode" -C -L 1 获取目录结构：
├── .DS_Store
├── .eslintrc.js // ESLint 代码风格检查工具的配置文件
├── .prettierrc // 代码格式化 prettier 的配置文件
├── BACKERS.md
├── CHANGELOG.md // 更新日志
├── LICENSE
├── README.md
├── SECURITY.md
├── api-extractor.json // TypeScript 的API提取和分析工具
├── jest.config.js // 测试框架 jest 的配置文件
├── netlify.toml // netlify 部署的配置文件
├── node_modules
├── package.json
├── packages // Vue源代码目录
├── pnpm-lock.yaml // pnpm 的依赖包管理配置文件
├── pnpm-workspace.yaml // pnpm 的 workspcae 配置文件
├── rollup.config.js // 模块打包器 rollup 的配置文件
├── scripts
├── test-dts // TypeScript 声明文件
└── tsconfig.json // TypeScript 配置文件
上面用到的一些工具中，使用了 pnpm 包管理工具，在安装依赖时需要使用 pnpm install 命令，使用 npm 或 yarn 会报错。
packages 源码目录结构
vue3的源码在packages目录下，我们还是执行 tree -aI ".git*|.vscode" -C -L 1 命令获取目录结构：
├── .DS_Store
├── compiler-core // 核心编译模块，抽象语法树和渲染桥接实现
├── compiler-dom // DOM的实现
├── compiler-sfc // Vue单文件组件(.vue)的实现
├── compiler-ssr
├── global.d.ts
├── reactivity
├── reactivity-transform
├── runtime-core
├── runtime-dom // 程序运行时(即程序被编译之后)的DOM处理
├── runtime-test
├── server-renderer // 服务端渲染实现
├── sfc-playground
├── shared // package 之间共享的工具库
├── size-check // 检查tree-shaking 后运行的代码包大小
├── template-explorer
├── vue
└── vue-compat
在 packages 的目录结构中，比较重要的模块有5个，它们是：
- compiler-core
- compiler-dom
- runtime-core
- runtime-dom
- reactivity
compiler 模块是在编译阶段将.vue文件编译成浏览器能识别的.html文件。runtime模块则是在运行阶段对DOM进行一系列处理。reactivity 模块则是vue中的响应式处理。
模块依赖关系图
根据模块之间的调用关系，可以得出如下的模块关系图：
