分析vue3源码1（模块总览）

eason_fan
468 阅读4分钟

分析vue3源码

前言

自从毕业参加工作以来，就没时间分析优秀开源项目的源码。之前看过react18的核心源码和实现，画过源码思维导图，但是没有好好总结沉淀。今年开始强迫自己抽时间分析vue3源码，同时写一些文章，也算是自己的一些知识积累吧。

本节，我们首先分析一下vue3项目的总体结构和各模块之间的逻辑关系，从而对于项目有一个总体的概念，接下来可以顺着这个逻辑逐步分析每个模块。

项目结构

git clone github.com/vuejs/core.… 下载vue3源码到本地。

image.png

可以看到这是一个比较大的项目，包含了多个重要的文件和目录。主要包括：

  1. 配置文件：

    • package.json - 项目依赖和配置

    • tsconfig.json - TypeScript 配置

    • rollup.config.js - 打包配置

    • vitest.config.ts - 测试配置

  2. 文档文件：

    • README.md - 项目说明文档

    • CHANGELOG.md - 变更日志

    • LICENSE - 许可证文件

    • SECURITY.md - 安全相关文档

  3. 重要目录：

    • packages/ - 可能包含项目的主要代码

    • scripts/ - 项目脚本

    • .github/ - GitHub 相关配置

核心代码

让我们看看 packages 目录，因为这里可能包含了主要的源代码：

image.png

packages包含了以下主要模块：

  1. 编译器相关：

    • compiler-core/ - 核心编译器

    • compiler-dom/ - DOM 相关编译器

    • compiler-sfc/ - 单文件组件编译器

    • compiler-ssr/ - 服务端渲染编译器

  2. 运行时相关：

    • runtime-core/ - 核心运行时

    • runtime-dom/ - DOM 相关运行时

    • runtime-test/ - 测试相关运行时

  3. 重要模块：

    • reactivity/ - 响应式系统

    • shared/ - 共享工具函数

    • vue/ - Vue.js 主包

    • server-renderer/ - 服务端渲染

核心流程

我们借助大模型来分析各个模块之间的关系

问GPT：首先说一下这几个模块之间的关系，以new Vue实例运行一个vue项目为例，这几个模块之间的关系和作用是什么

GPT答：让我为你详细解释一下 Vue.js 各个模块在项目运行过程中的关系和作用。以创建和运行一个 Vue 实例为例：

1. 初始化阶段

当你写下 new Vue() 或使用 createApp() 时，主要涉及以下模块：

  • vue/ 包是入口模块，它整合了所有其他模块，提供了创建应用的公共 API

  • runtime-core/ 负责：

    • 创建组件实例

    • 管理组件生命周期

    • 提供核心渲染逻辑

    • 实现虚拟 DOM 和 diff 算法

2. 编译阶段

当你的代码中包含 .vue 文件或模板时：

  • compiler-sfc/ 首先处理单文件组件（.vue 文件）：

    • 将 template、script、style 分离

    • 处理各种预处理器（如 TypeScript、SCSS 等）

  • compiler-core/ 负责：

    • 将模板解析为 AST（抽象语法树）

    • 对 AST 进行转换和优化

    • 生成渲染函数

  • compiler-dom/ 在 compiler-core 的基础上：

    • 添加浏览器特定的编译优化

    • 处理 DOM 相关的指令和事件

3. 响应式系统

当数据需要变成响应式时：

  • reactivity/ 模块负责：

    • 通过 Proxy 或 Object.defineProperty 创建响应式对象

    • 追踪依赖（track）

    • 触发更新（trigger）

    • 提供 ref、reactive 等响应式 API

4. 运行时阶段

当应用实际运行时：

  • runtime-dom/ 负责：

    • 处理真实 DOM 操作

    • 处理事件监听

    • 处理属性更新

  • runtime-core/ 继续负责：

    • 调度更新

    • 执行生命周期钩子

    • 维护组件树

5. 共享功能

  • shared/ 模块：

    • 提供各个模块都需要用到的工具函数

    • 提供通用的类型定义

    • 提供常量定义

执行流程示例

以一个简单的数据更新为例：

  1. 用户修改数据

  2. reactivity 模块检测到变化，触发更新

  3. runtime-core 创建新的虚拟 DOM

  4. runtime-core 进行 diff 比较

  5. runtime-dom 执行实际的 DOM 更新

特殊场景

  • 服务端渲染（SSR）时：

    • compiler-ssr/ 生成专门的 SSR 渲染代码

    • server-renderer/ 负责在服务器端执行渲染

  • 测试环境：

    • runtime-test/ 提供测试所需的特殊运行时实现

这些模块通过精心的设计实现了高度的解耦，每个模块专注于自己的职责，同时又能够完美地协同工作。这种模块化的设计使得：

  1. 代码更容易维护和测试

  2. 可以根据需要只使用部分功能（比如只使用响应式系统）

  3. 便于在不同环境下使用（浏览器、服务器、测试环境等）

  4. 支持不同的构建版本（完整版、运行时版本等）

这就是为什么 Vue.js 既能保持强大的功能，又能保持较小的体积和良好的性能的原因。

总结

本节，通过分析vue3源码的目录结构和各模块之间的关系。我们对vue3项目有了一个大概的认识。接下来，让我们逐一分析每个流程的模块和代码

avatar
文章
阅读
粉丝