Vue3源码结构,已v3.1.1版本为例,目录结构如下:
├── packages // Vue源代码目录
├── scripts
├── test-dts // TypeScript 声明文件
├── .eslintrc.js // eslint 配置文件
├── .gitignore // git 提交配置文件
├── .prettierrc // prettier 代码格式化配置文件
├── api-extractor.json // TypeScript 的API提取和分析工具
├── CHANGELOG.md // 更新日志
├── jest.config.js // 测试框架 jest 的配置文件
├── LICENSE
├── package.json
├── README.md
├── rollup.config.js // rollup 模块打包器配置文件
├── tsconfig.json // TypeScript 配置文件
├── yarn.lock
packages文件夹是Vue3的源码目录,详细目录结构如下:
├── compiler-core // 编译核心,抽象语法树和渲染桥接实现
├── compiler-dom // 编译 DOM 实现
├── compiler-sfc // Vue单文件组件(.vue)的实现
├── compiler-ssr // 编译服务端渲染
├── reactivity // 响应式文件
├── runtime-core // 运行时核心
├── runtime-dom // 运行时 DOM 实现
├── runtime-test // 测试文件
├── server-renderer // 服务端渲染实现
├── sfc-playground
├── shared // package 之间共享的工具库
├── size-check
├── template-explorer
├── vue-compat
├── global.d.ts // 全局ts声明
通过结构可以看到packages中有5个核心模块,分别是:
- compiler-core
- compiler-dom
- runtime-core
- runtime-dom
- reactivity
compiler :程序编译时,即写好的源码被编译为可执行的文件这段时间
runtime:程序运行时,即程序被编译了之后,打开并运行直到关闭的这个过程
Vue3源码架构