1. 项目概述
Vue 3 采用 monorepo 架构，将不同的功能模块拆分成多个独立的包，便于维护和按需引入。项目使用 pnpm 作为包管理器，通过工作区管理多个包。
2. 目录结构
core/
├── packages/ # 公共包
│ ├── compiler-core/ # 平台无关的编译器核心
│ ├── compiler-dom/ # 针对浏览器的 DOM 编译器
│ ├── compiler-sfc/ # 单文件组件编译器
│ ├── compiler-ssr/ # 服务端渲染编译器
│ ├── reactivity/ # 响应式系统
│ ├── runtime-core/ # 平台无关的运行时核心
│ ├── runtime-dom/ # 针对浏览器的 DOM 运行时
│ ├── runtime-test/ # 测试用的轻量级运行时
│ ├── server-renderer/ # 服务端渲染实现
│ ├── shared/ # 各包共享的工具函数
│ ├── vue/ # 完整版 Vue，整合编译器和运行时
│ └── vue-compat/ # Vue 2 兼容模式
├── packages-private/ # 私有包（开发工具等）
│ ├── sfc-playground/ # SFC 在线游乐场
│ ├── template-explorer/ # 模板编译 explorer 工具
│ ├── dts-test/ # TypeScript 类型定义测试
│ └── dts-built-test/ # 构建后的类型测试
├── scripts/ # 构建和开发相关脚本
└── changelogs/ # 版本变更日志
3. 核心包分析
3.1 编译器相关
@vue/compiler-core
- 平台无关的编译器核心实现
- 包含基础的 AST 节点定义、转换和代码生成逻辑
- 为不同平台的编译器提供基础功能
@vue/compiler-dom
- 针对浏览器环境的 DOM 编译器实现
- 基于 compiler-core，添加了 DOM 特定的优化和转换
- 处理 HTML 模板、指令等浏览器特定功能
@vue/compiler-sfc
- 单文件组件（.vue 文件）编译器
- 解析和编译 SFC 中的 template、script 和 style 块
- 支持 TypeScript、CSS 预处理器等功能
@vue/compiler-ssr
- 服务端渲染编译器
- 为服务端渲染提供专门的编译优化
3.2 运行时相关
@vue/reactivity
- 响应式系统核心实现
- 包含 ref、reactive、computed、watch 等 API
- 独立于其他 Vue 模块，可单独使用
@vue/runtime-core
- 平台无关的运行时核心
- 包含虚拟 DOM 渲染器、组件系统、生命周期等核心功能
- 不直接操作 DOM，为不同平台提供基础实现
@vue/runtime-dom
- 针对浏览器环境的 DOM 运行时实现
- 基于 runtime-core，添加了 DOM 操作相关功能
- 提供 createApp、指令、组件等浏览器特定实现
@vue/runtime-test
- 用于测试的轻量级运行时
- 为单元测试提供简化的运行时环境
3.3 其他核心包
@vue/server-renderer
- 服务端渲染实现
- 将 Vue 组件渲染为 HTML 字符串
- 支持流式渲染和客户端激活
@vue/shared
- 各包共享的工具函数和常量
- 包含类型检查、字符串处理、对象操作等通用工具
- 不依赖其他 Vue 包
vue
- 完整版 Vue，整合了编译器和运行时
- 提供多种构建版本（完整版、运行时版、ESM、CommonJS 等）
- 是大多数用户使用的入口包
@vue/vue-compat
- Vue 2 兼容模式
- 为从 Vue 2 迁移提供兼容性支持
4. 私有工具包
sfc-playground
- 在线单文件组件游乐场
- 用于测试和演示 Vue SFC 功能
template-explorer
- 模板编译 explorer 工具
- 可视化展示模板编译过程和结果
dts-test
- TypeScript 类型定义测试
- 确保类型定义的正确性和完整性
5. 架构特点
5.1 模块化设计
- 将不同功能拆分成独立包，实现关注点分离
- 每个包都有明确的职责和接口
5.2 平台无关性
- 核心模块（compiler-core、runtime-core）与平台特定实现分离
- 便于支持不同平台（Web、Weex、Native 等）
5.3 可摇树性
- 通过 ES Module 和合理的包结构，支持 tree-shaking
- 用户只引入需要的功能，减小打包体积
5.4 类型友好
- 全面使用 TypeScript，提供完整的类型定义
- 通过类型测试确保类型定义的正确性
6. 依赖关系
graph TD
vue --> compiler-dom
vue --> runtime-dom
vue --> compiler-sfc
vue --> server-renderer
compiler-dom --> compiler-core
compiler-sfc --> compiler-core
compiler-ssr --> compiler-core
runtime-dom --> runtime-core
runtime-test --> runtime-core
server-renderer --> runtime-core
runtime-core --> reactivity
runtime-core --> shared
compiler-core --> shared
reactivity --> shared
compiler-sfc --> reactivity
7. 构建系统
- 使用 Rollup 进行构建
- 支持多种输出格式：ESM、CommonJS、UMD 等
- 通过脚本支持按需构建特定包和格式
8. 总结
Vue 3 的架构设计体现了现代前端框架的先进理念，通过模块化、分层设计和平台无关性，实现了良好的可维护性、可扩展性和灵活性。开发者可以根据需要选择引入特定功能，实现按需加载，同时保持了框架的完整功能。
