源码分析

目录总览

├── .github/               # GitHub 配置文件，包含 issue 和 pull request 模板、CI 配置等
├── .vscode/               # VSCode 编辑器相关的配置
├── changelogs/            # 版本更新日志
├── packages-private/      # 一些内部使用的私有包
│   ├── dts-built-test/    # 用于测试构建后的 TypeScript 声明文件
│   ├── dts-test/          # 用于测试 TypeScript 声明文件的正确性
│   ├── sfc-playground/    # 用于单文件组件（SFC）的在线调试工具
│   ├── template-explorer/ # 用于调试和展示模板编译结果的工具
│   ├── vite-debug/        # Vite 调试工具，用于开发和调试 Vite 项目
│   └── tsconfig.json      # TypeScript 项目的全局配置文件（packages-private 子项目的配置）
├── packages/              # Vue 3 核心代码，包含各个模块
│   ├── compiler-core/     # 核心编译器模块，将模板编译为渲染函数
│   ├── compiler-dom/      # 针对 DOM 的编译器模块，编译成适用于浏览器的代码
│   ├── compiler-sfc/      # 用于编译单文件组件（.vue 文件）的模块
│   ├── compiler-ssr/      # 服务端渲染的编译器模块
│   ├── reactivity/        # 响应式系统模块，包括 reactive、ref 等核心功能
│   ├── runtime-core/      # 核心运行时代码，处理组件、渲染器、响应式等
│   ├── runtime-dom/       # 针对 DOM 的运行时，实现浏览器中的 DOM 渲染
│   ├── runtime-test/      # 测试框架，提供测试 Vue 应用的工具
│   ├── server-renderer/   # 服务端渲染模块，用于服务端生成 HTML
│   ├── shared/            # 内部共享的工具函数和类型
│   ├── vue-compat/        # 向后兼容 Vue 2 的代码模块
│   ├── vue/               # Vue 3 的入口，导出完整的 Vue API
├── global.d.ts            # 全局 TypeScript 类型声明文件
├── scripts/               # 脚本文件夹，包含构建、测试等自动化脚本
├── .git-blame-ignore-revs # Git blame 忽略的提交记录
├── .gitignore             # Git 忽略的文件列表
├── .node-version          # Node.js 版本配置文件
├── .prettierignore        # Prettier 格式化忽略的文件
├── .prettierrc            # Prettier 配置文件
├── BACKERS.md             # 支持者名单
├── CHANGELOG.md           # 版本变更日志
├── FUNDING.json           # 项目资助相关配置
├── LICENSE                # 许可证信息
├── README.md              # 项目简介和使用说明
├── SECURITY.md            # 安全相关的报告指南
├── eslint.config.js       # ESLint 配置文件
├── netlify.toml           # Netlify 部署配置文件
├── package.json           # 项目依赖及元数据信息
├── pnpm-lock.yaml         # PNPM 依赖锁定文件
├── pnpm-workspace.yaml    # PNPM 工作空间配置
├── rollup.config.js       # Rollup 构建工具的配置
├── rollup.dts.config.js   # Rollup 用于生成 TypeScript 类型声明的配置
├── tsconfig.build.json    # TypeScript 构建配置文件
├── tsconfig.json          # TypeScript 项目全局配置文件
├── vitest.config.ts       # Vitest 测试框架的全局配置
├── vitest.e2e.config.ts   # Vitest 端到端测试配置
├── vitest.unit.config.ts  # Vitest 单元测试配置
├── vitest.workspace.ts    # Vitest 工作区配置

在 Vue 3 的源码仓库（vuejs/core）中，packages 目录是整个 Vue 代码库的核心部分，按照模块化结构划分了不同的功能组件。每个文件夹代表 Vue 3 的一个独立子包，它们通常会被单独发布到 npm 上。以下是 packages 目录下各个文件夹的作用解析：

packages

compiler-core

作用：
通用的编译器核心，负责将模板（template）转换为 JavaScript 代码。这个核心不依赖任何具体的平台（如浏览器或 SSR），可以被 compiler-dom 和 compiler-ssr 复用。

主要功能：

• 解析（Parse）：将模板字符串转换为 AST（抽象语法树）
• 转换（Transform）：对 AST 进行优化和转换
• 代码生成（Codegen）：将 AST 转换为 JavaScript 渲染函数

compiler-dom

作用：
基于 compiler-core，提供面向浏览器环境的编译器实现，主要处理浏览器特定的指令（如 v-html、v-model）。

主要功能：

• 解析 DOM 特定指令
• 处理 HTML 标签及其属性
• 生成适用于浏览器端的渲染函数

compiler-sfc

作用：
用于解析 .vue 单文件组件（SFC, Single File Component），将 SFC 拆分为 template、script 和 style 进行处理。

主要功能：

• 解析 .vue 文件的结构
• 处理 <template>，交给 compiler-dom
• 处理 <script>，交给 @vue/reactivity
• 处理 <style>，仅进行基本解析，不做 CSS 预处理

compiler-ssr

作用：
用于服务器端渲染（SSR, Server-Side Rendering），基于 compiler-core，与 compiler-dom 类似，但生成 SSR 兼容的渲染函数。

主要功能：

• 处理 SSR 特定的编译逻辑
• 生成适用于 Node.js 运行时的渲染函数

reactivity

作用：
Vue 3 响应式系统的核心，实现 ref、reactive、computed 等功能。

主要功能：

• reactive()：基于 Proxy 创建响应式对象
• ref()：创建响应式的单个值
• computed()：计算属性
• watch()：监听变化
• effect()：依赖追踪和副作用触发

runtime-core

作用：
Vue 运行时的核心，实现组件、渲染、虚拟 DOM（VNode）等逻辑，不依赖具体的 DOM 或 SSR。

主要功能：

• 组件创建、渲染、更新
• 依赖 reactivity 进行数据绑定
• 处理虚拟 DOM（VNode）
• 处理生命周期钩子
• 处理 provide/inject

runtime-dom

作用：
基于 runtime-core，提供浏览器端运行时支持，包括 patch 方法，用于操作真实 DOM。

主要功能：

• 处理浏览器特定 API（如 document.createElement）
• 处理 DOM 事件绑定、属性更新等
• 处理 v-on、v-bind 等指令

runtime-test

作用：
提供一个虚拟的运行时环境，便于测试 runtime-core 的行为，而不依赖真实的 DOM。

主要功能：

• 用于 Vue 3 内部单元测试
• 提供虚拟 DOM 操作 API
• 模拟组件挂载、更新、卸载等流程

server-renderer

作用：
基于 runtime-core，提供 SSR 相关的 API，如 renderToString()，用于服务器端渲染 Vue 组件。

主要功能：

• 提供 renderToString()，将组件转换为 HTML 字符串
• 处理异步组件的预加载
• 处理 teleport、suspense 等特殊情况

shared

作用：
存放 Vue 3 代码库中多个模块共享的工具函数、常量等。

主要功能：

• 类型判断（isObject()、isArray() 等）
• 工具函数（extend()、hasOwn() 等）
• 运行时 flag（如 __DEV__）

vue

作用：
Vue 3 的最终打包产物，整合 runtime-dom、compiler-sfc 等模块，生成 vue 包。

主要功能：

• 作为 Vue 3 的入口
• 结合编译器、运行时、响应式系统
• 提供完整的 Vue 3 API

vue-compat

作用：
用于兼容 Vue 2 的 API，提供与 Vue 2 相同的 API，但使用 Vue 3 的实现。

private-packages

sfc-playground

vue3 sfc 解析预览。

template-explorer

作用：
提供一个 Web UI 方便调试 Vue 3 的编译器，可以在线解析 Vue 模板并查看 AST 结构。

主要功能：

• 可视化编译过程
• 解析 Vue 3 模板并展示 AST
• 调试编译器行为