构成 Vue.js 的关键要素
Vue.js 仓库
Vue.js 可以在这个仓库中找到： https://github.com/vuejs/core
有趣的是，这是 v3 的仓库。对于 v2 和更早的版本，您可以在另一个仓库中找到： https://github.com/vuejs/vue
为了本次讨论，我们将专注于核心仓库（v3）。
构成 Vue.js 的主要要素
让我们首先对 Vue.js 的实现有一个整体的理解。
Vue.js 仓库中有一个关于贡献的 markdown 文件； 如果您感兴趣，可以查看它以了解其架构。（不过，跳过也没关系。）
https://github.com/vuejs/core/blob/main/.github/contributing.md
从大的方面来说，Vue.js 包含以下主要组件：
运行时（Runtime）
运行时包含影响实际操作的所有内容 - 从渲染到组件状态管理。
这指的是在浏览器或服务器（在 SSR 的情况下）上运行的用 Vue.js 开发的 Web 应用程序的全部内容。具体包括：
组件系统
Vue.js 是一个面向组件的框架。根据用户的需求，您可以可维护地创建和封装组件以供重用。
它还提供组件之间状态共享（props/emits 或 provide/inject）和生命周期钩子等功能。
响应式系统
它跟踪组件持有的状态，并在发生变化时更新屏幕。
这种监控和响应机制称为响应式。
import { ref } from 'vue'
const count = ref(0)
// 当执行这个函数时，显示计数的屏幕也会更新
const increment = () => {
count.value++
}（仅仅通过改变一个值就能更新屏幕，这很神奇，对吧？）
虚拟 DOM 系统
虚拟 DOM 系统是 Vue.js 的另一个强大机制。它定义了一个模仿 DOM 的 JavaScript 对象在 JS 运行时中。
更新时，它将当前的虚拟 DOM 与新的虚拟 DOM 进行比较，并仅将差异反映到真实 DOM 中。
我们将在专门的章节中深入探讨这一点。
编译器（Compiler）
编译器负责将开发者接口转换为内部实现。
"开发者接口"是指"使用 Vue.js 进行 Web 应用程序开发的开发者"和"Vue 内部操作"之间的边界。
本质上，当您使用 Vue.js 编写时，有些部分显然不是纯 JavaScript - 比如模板指令或单文件组件。
Vue.js 提供这些语法并将它们转换为纯 JavaScript。
此功能仅在开发阶段使用，不是实际运行的 Web 应用程序的一部分。
（它仅仅编译为 JavaScript 代码）。
编译器有两个主要部分：
模板编译器
顾名思义，这是模板部分的编译器。
具体来说，它处理 v-if 或 v-on 等指令，用户组件标记（如 ）以及插槽等功能。
SFC 编译器
正如您可能猜到的，这代表单文件组件编译器。
它允许您在单个 .vue 文件中定义组件的模板，脚本和样式。
在 script setup 中使用的函数，如 defineProps 或 defineEmits 也由此编译器提供。
这个 SFC 编译器通常与 Webpack 或 Vite 等工具结合使用。
作为其他工具插件的实现不在核心仓库中。
SFC 编译器的主要功能在核心中，但插件在不同的仓库中实现。
（参考：vitejs/vite-plugin-vue）
顺便说一下，我们将实现一个实际的 Vite 插件来操作我们的自定义 SFC 编译器。
窥探 vuejs/core 目录
现在我们对 Vue 的主要要素有了大致的了解，让我们看看实际的源代码是什么样子的（尽管我们只是在讨论目录）。
主要源代码存储在"packages"目录中。
https://github.com/vuejs/core/tree/main/packages
一些需要关注的关键目录是：
- compiler-core
- compiler-dom
- compiler-sfc
- reactivity
- runtime-core
- runtime-dom
- vue
为了理解它们的相互依赖关系，贡献指南中的图表特别有见地。
https://github.com/vuejs/core/blob/main/.github/contributing.md#package-dependencies
在这本书中，我们将为所有这些主题提供实现和解释。