我们来深入讲解一下 Vue 3 的核心源码库 vuejs/core。这是一个非常宏大的话题，我会从 设计理念、项目结构、核心模块、工作流程 以及 如何开始阅读 这几个方面来为你庖丁解牛。

1. 核心设计理念

在深入代码之前，理解其背后的设计思想至关重要。Vue 3 的重构主要围绕以下几个目标：

1. 更好的性能 (Better Performance)：

   • 编译时优化：通过静态树提升（Static Tree Hoisting）、补丁标志（Patch Flags）等技术，在编译阶段分析模板，标记动态和静态内容。这样在运行时，Diff 算法就可以跳过大量静态节点的比对，极大提升更新性能。

   • 更高效的虚拟 DOM (VDOM)：重写了 VDOM 的实现，使其更快、更小。

2. 更强的可维护性 (Stronger Maintainability)：

   • Monorepo 架构：整个项目被拆分成多个内部独立的包（packages），每个包都有自己的 API、类型定义和测试。这使得模块边界更清晰，方便团队协作和独立维护。

   • TypeScript 编写：整个核心库由 TypeScript 重写，提供了更好的类型支持，使得大型应用开发和代码重构更加安全可靠。

3. 更灵活的架构 (More Flexible Architecture)：

   • 模块化设计：核心功能（如响应式系统、编译器、渲染器）被解耦到不同的包中。这使得你可以按需引入功能（利于 Tree-shaking），甚至可以轻松地创建自定义渲染器（例如渲染到 Canvas、终端等）。

   • Composition API (组合式 API)：这是 Vue 3 最大的亮点之一。它从根本上解决了 Vue 2 Options API 在大型组件中逻辑分散、难以复用的问题。源码本身也大量使用了 Composition API 的思想来组织自身逻辑。

---

2. 项目结构概览

当你打开 vuejs/core 的 GitHub 仓库时，首先会看到一个典型的 monorepo 结构，它使用 pnpm workspaces 来管理。

Generated code

.
├── packages/         # 核心代码，所有的模块都在这里
│   ├── reactivity/     # 响应式系统
│   ├── runtime-core/   # 平台无关的运行时核心
│   ├── runtime-dom/    # 浏览器平台的运行时
│   ├── compiler-core/  # 平台无关的编译器核心
│   ├── compiler-dom/   # 浏览器平台的编译器
│   ├── compiler-sfc/   # 单文件组件(.vue)编译器
│   ├── template-explorer/ # 用于调试编译器的工具
│   ├── shared/         # 多个包共享的工具函数
│   └── vue/            # 面向用户的完整版 vue 包
├── scripts/          # 构建、发布、测试等脚本
├── rollup.config.js  # Rollup 打包配置文件
├── pnpm-workspace.yaml # pnpm 工作区定义文件
└── ...

Use code with caution.

• packages/：这是源码的灵魂所在。下面我们会详细讲解其中的核心模块。

• scripts/：包含了项目的构建脚本 (build.js)、开发脚本 (dev.js) 等。如果你想在本地启动一个调试版的 Vue，就需要运行这里的脚本。

---

3. 核心模块详解 (packages/ 目录)

让我们逐一拆解最重要的几个模块。

a. @vue/reactivity (响应式系统)

这是 Vue 3 的基石，可以独立于任何渲染层使用。

• 核心文件: effect.ts, reactive.ts, ref.ts

• 核心原理: 基于 Proxy 实现。

  1. reactive(obj): 使用 Proxy 包装一个对象，使其成为响应式。当访问对象的属性时（get 操作），会调用 track() 函数，收集依赖（即哪个 effect 依赖了这个属性）。

  2. effect(fn): 创建一个“副作用函数”。这个函数会立即执行一次。在执行过程中，如果访问了任何响应式对象的属性，这个 effect 就会被上一步的 track() 过程收集起来。

  3. trigger(): 当修改响应式对象的属性时（set 操作），会调用 trigger() 函数，触发所有依赖该属性的 effect 重新执行。

  一句话总结: track 负责“依赖收集”，trigger 负责“派发更新”。

• ref(value): 用于处理原始值（string, number, boolean）的响应式。它的内部实现其实是创建了一个包含 .value 属性的对象，然后将这个对象用 reactive 包裹。所以 ref 是 reactive 的一种语法糖。

b. @vue/runtime-core (平台无关的运行时核心)

这个模块定义了 Vue 组件的渲染和更新过程，但它不关心你最终渲染到哪里（浏览器 DOM、Canvas 还是其他地方）。

• 核心文件: renderer.ts, h.ts, component.ts

• 主要职责:

  1. 虚拟节点 (VNode): h() 函数（hyperscript 的缩写）用于创建 VNode。VNode 是对真实 UI 元素的 JavaScript 对象描述。

  2. 组件实例: 定义和管理组件的生命周期、props、slots、setup() 等。

  3. 渲染器 (Renderer): renderer.ts 中暴露了 createRenderer 函数。这是 Vue 3 渲染系统的核心。它接收一个包含平台特定操作的对象（例如，如何创建元素、插入元素、设置属性），然后返回一个完整的渲染器。这个渲染器包含了 render 和 patch 方法。

  4. Diff 算法: patch 函数是 Diff 算法的核心实现，它比较新旧 VNode，计算出最小的变更，然后调用平台特定的操作来更新界面。

c. @vue/runtime-dom (浏览器平台运行时)

这个模块是 runtime-core 在浏览器环境下的具体实现。

• 核心文件: index.ts, nodeOps.ts, patchProp.ts

• 主要职责:

  1. 提供平台 API: 它实现了 runtime-core 所需的平台特定操作。例如，nodeOps.ts 提供了 createElement, querySelector, parentNode 等 DOM 操作函数。

  2. 处理 DOM 特有属性: patchProp.ts 负责处理 DOM 元素的 class, style, 事件监听器 (onXXX) 等特有属性的添加、更新和删除。

  3. 创建应用: 它导出了 createApp 函数，这个函数内部调用 runtime-core 的 createApp，并传入了浏览器特定的渲染器配置。我们平时使用的 import { createApp } from 'vue' 其实就是从这里来的。

d. @vue/compiler-core (平台无关的编译器核心)

负责将模板字符串（template）编译成可执行的 JavaScript 渲染函数（render function）。同样，它也是平台无关的。

• 核心文件: compile.ts, parse.ts, transform.ts, codegen.ts

• 编译流程:

  1. Parse (解析): parse.ts 将模板字符串解析成一个抽象语法树（AST）。

  2. Transform (转换): transform.ts 遍历 AST，进行各种优化。这是 Vue 3 性能提升的关键。例如，它会找到静态节点并进行提升，标记出需要进行 Diff 的动态节点（Patch Flags）。

  3. Codegen (代码生成): codegen.ts 再次遍历转换后的 AST，最终生成一个字符串形式的渲染函数代码。

e. @vue/compiler-dom (浏览器平台编译器)

为 compiler-core 提供浏览器特定的编译支持。

• 主要职责: 它扩展了 compiler-core，增加了处理 HTML 特定指令（如 v-model, v-on）和解析 HTML 特有标签、实体等的功能。

f. @vue/compiler-sfc (单文件组件编译器)

这个包就是我们熟知的 Vite 或 Vue CLI 内部用来处理 .vue 文件的工具。

• 主要职责: 将一个 .vue 文件解析成三个部分：

  • <template>: 交给 @vue/compiler-dom 编译成渲染函数。

  • <script>: 提取出脚本代码，包括 setup 语法糖的处理。

  • <style>: 提取出样式代码，并处理 scoped 和 v-bind in CSS 等特性。

g. vue (入口包)

这是最终发布到 npm、我们通过 import ... from 'vue' 引入的包。它不包含太多逻辑，主要工作是整合并导出上述所有核心模块的 API。它会根据不同的打包配置（例如，是否包含编译器）输出不同的文件。

---

4. Vue 3 的完整工作流程

现在，我们把所有模块串联起来，看看从一个 .vue 文件到最终显示在页面上，都发生了什么。

阶段一：编译时 (在构建工具中，如 Vite)

1. Vite 读取 .vue 文件。

2. @vue/compiler-sfc 介入，解析文件。

   • 它将 <template> 内容交给 @vue/compiler-dom。

   • @vue/compiler-dom 将模板编译成高效的 render() 函数字符串，这个函数已经包含了 Patch Flags 等优化信息。

   • 它处理 <script setup>，将其转换为标准的组件 setup() 函数。

3. 最终，.vue 文件被编译成一个标准的 JavaScript 模块，其中包含一个带有 render 方法的组件对象。

阶段二：运行时 (在浏览器中)

1. 执行 createApp(App).mount('#app')。

2. @vue/runtime-dom 中的 createApp 被调用，它创建了一个应用实例，并配置好了基于 DOM 的渲染器。

3. mount() 方法首次执行时：

   • 组件的 render() 函数被调用。

   • render() 函数内部会执行 h() 函数（来自 @vue/runtime-core），创建出描述 UI 的 VNode 树。

   • @vue/runtime-dom 的渲染器拿到 VNode 树，进行一次完整的渲染，通过 createElement, appendChild 等 DOM API 创建出真实的 DOM 节点并挂载到 #app 元素上。

   • 在这个过程中，如果遇到响应式数据，track 会收集依赖（即组件的渲染 effect）。

阶段三：更新时 (数据变化)

1. 你修改了一个在 setup 中定义的 ref 或 reactive 对象的值。

2. Proxy 的 set 拦截器被触发，调用 trigger() (来自 @vue/reactivity)。

3. trigger 找到所有依赖这个数据的 effect，在这里就是组件的渲染 effect，并重新执行它。

4. 组件的 render() 函数再次被调用，生成一个新的 VNode 树。

5. 渲染器的 patch 方法被调用，它接收新旧两个 VNode 树。

6. Diff 算法开始工作：

   • 它会利用编译时留下的 Patch Flags，跳过所有静态节点的比对。

   • 只对标记为动态的节点进行比对，找出最小化的差异。

   • 调用 @vue/runtime-dom 提供的 patchProp 或 setText 等具体 DOM 操作来更新界面。

---

5. 如何开始阅读源码？

1. Clone 项目并安装依赖：

   Generated bash

   git clone https://github.com/vuejs/core.git
   cd core
   pnpm install

   Use code with caution.Bash

2. 从一个简单的 API 入手：不要试图一次性理解所有东西。选择一个你熟悉的 API，比如 ref。

   • 在 VSCode 中，全局搜索 function ref(。

   • 你会找到它在 packages/reactivity/src/ref.ts 中的定义。

   • 使用 IDE 的“跳转到定义”功能，看看 RefImpl 类、trackRefValue、triggerRefValue 是如何实现的。你会发现它们最终都调用了 track 和 trigger。

3. 利用调试：

   • 在 scripts/dev.js 中，你可以找到如何启动一个本地调试环境。通常是 pnpm run dev。

   • 它会在 packages/vue/dist 目录下生成一个 vue.global.js 文件，并带上 sourcemap。

   • 创建一个简单的 HTML 文件，引入这个 js 文件，写一个 Vue 应用。

   • 在浏览器的开发者工具中，你就可以在源码（例如 reactivity/src/ref.ts）里打断点，单步调试，观察整个调用栈。

4. 先读测试用例：packages 下每个模块都有一个 __tests__ 目录。测试用例是理解一个函数功能、边界情况和预期行为的最好文档。

5. 推荐阅读顺序：

   • shared -> reactivity -> runtime-core -> runtime-dom -> compiler-core。

Vue 3 的源码是一部设计精良的工程杰作。通过理解其模块化的架构和核心流程，你不仅能更深入地使用 Vue，还能学到大量关于软件工程、设计模式和前端性能优化的宝贵知识。