概述

相关源文件

• BACKERS.md
• CHANGELOG.md
• README.md
• netlify.toml
• package.json
• packages/compiler-core/package.json
• packages/compiler-dom/package.json
• packages/compiler-sfc/package.json
• packages/compiler-ssr/package.json
• packages/reactivity/package.json
• packages/runtime-core/package.json
• packages/runtime-dom/package.json
• packages/server-renderer/package.json
• packages/shared/package.json
• packages/vue/package.json

本文档介绍 Vue.js 核心仓库，解释了其架构、关键组件以及它们如何协同工作构成 Vue.js 框架。Vue.js 核心代码库被组织成一个单仓（monorepo），包含多个包，共同实现了 Vue 的响应式系统、组件模型、模板编译器和渲染引擎。

来源: README.md1-56 package.json1-132

存储库结构

Vue.js 核心仓库遵循单仓（monorepo）架构，其中多个相互依赖的包被管理在同一个仓库中。这种结构有助于提高包之间的协调性并实现统一的版本控制。

来源: package.json1-132 packages/vue/package.json1-112 packages/runtime-dom/package.json1-60

包架构

Vue.js 核心被划分为几个相互关联的包，每个包负责框架的特定方面

关键包

• vue: 用户安装的主包；重新导出其他包的功能
• reactivity: 实现 Vue 的响应式系统以跟踪状态变化
• runtime-core: 提供平台无关的组件运行时
• runtime-dom: 处理 DOM 特定的操作和浏览器集成
• compiler-core: 实现模板编译器的核心逻辑
• compiler-dom: 处理 DOM 特定的编译细节
• compiler-sfc: 处理单文件组件（.vue 文件）
• server-renderer: 提供服务器端渲染功能
• shared: 在各包之间共享的工具和常量

来源: packages/vue/package.json1-112 packages/runtime-core/package.json1-52 packages/reactivity/package.json1-55 packages/compiler-sfc/package.json1-67

构建系统和格式

Vue.js 提供多种分发格式以支持不同的用例

格式	描述	主要用例
esm-bundler	用于打包器的 ES 模块	Webpack、Rollup、Vite
esm-browser	浏览器端的 ES 模块	通过 `<script type="module">` 直接在浏览器中使用
cjs	CommonJS	Node.js, 较旧的打包器
global	IIFE	通过 `<script>` 直接在浏览器中使用
global-runtime	仅 IIFE 运行时	当模板预编译时，包会更小

这些格式是使用定义在 `scripts` 目录中的自定义 Rollup 构建系统构建的。

来源: package.json6-46 packages/vue/package.json72-82

核心架构

Vue.js 由四个主要子系统组成，它们协同工作

响应式系统

响应式系统会自动跟踪 JavaScript 状态变化并在需要时触发更新。它建立在以下关键概念之上：

来源: packages/reactivity/package.json1-55

编译管道

Vue 模板会经过一个编译过程，转化为可执行的渲染函数

来源: packages/compiler-core/package.json1-58 packages/compiler-dom/package.json1-57

渲染系统

渲染系统根据虚拟 DOM 创建和更新 DOM

来源: packages/runtime-core/package.json1-52 packages/runtime-dom/package.json1-60

组件系统

组件系统管理组件的创建、挂载、更新和生命周期

来源: packages/runtime-core/package.json1-52

附加功能

服务器端渲染 (SSR)

Vue 通过其自定义元素集成，提供了内置的服务器端渲染能力，通过 `server-renderer` 包，允许应用程序在服务器上预渲染，以提高性能和 SEO。

来源: packages/server-renderer/package.json1-55

单文件组件 (SFC)

`compiler-sfc` 包负责处理 `.vue` 文件，这些文件将模板、脚本和样式封装在单个文件中。

来源: packages/compiler-sfc/package.json1-67

自定义元素

Vue 通过其自定义元素集成，支持创建自定义的内置元素（Web Components）。

相关文档

有关 Vue.js 核心特定方面的更详细信息，请参阅以下 Wiki 页面：

• 包架构 - 包结构和关系的详细解释
• 响应式系统 - 关于响应式实现的深入信息
• 组件系统 - 关于组件模型和生命周期的详细信息
• 模板编译 - 模板如何被解析和转换
• 渲染系统 - 虚拟 DOM 和渲染细节

开发和贡献

Vue.js 核心仓库包含一个强大的开发环境，提供用于构建、测试和验证更改的工具。要为 Vue.js 开发做出贡献，请参考仓库的贡献指南。

来源: README.md42-50 package.json6-46