认识Vue3.js 的源码架构Vue.js 作为一款流行的前端框架，其源码设计一直以清晰、模块化和高效著称。既然他这么优

Vue.js 作为一款流行的前端框架，其源码设计一直以清晰、模块化和高效著称。既然他这么优秀，作为web前端开发者我们是不是应该学习下他的架构呢！今天我们就以Vue3的源码为例看下他是怎么架构的。

一、克隆Vue3.js 的源码

要研究Vue3. 的源码，第一步肯定是将源码克隆下来，要不然怎么研究呢！打开github.com/，搜索vue，

注意： 搜索出来的是vue2，要根据这个提示点击github.com/vuejs/core 才是vue3仓库地址。然后点开code 选择https,

复制地址github.com/vuejs/core.…

在自己的开发目录执行 git clone https://github.com/vuejs/core.git 即可将Vue3的源码克隆到本地了。

二、一级目录介绍

打开刚才克隆的项目：

可以看到目录结构大概长这样，那么这些目录结构，代表着什么意思呢？我们来看几个主要的

code/
├── scripts/              # 构建和开发相关的脚本文件
├── packages/             # Vue 3 的核心模块和工具包
├── packages-private      # 私有的包
├── .github/              # GitHub 相关的配置文件
├── .vscode/              # VSCode 编辑器配置
├── .eslintrc.js          # ESLint 配置
├── .prettierrc.js        # Prettier 配置
├── package.json          # 项目依赖和脚本配置
├── README.md             # 项目说明文档
└── ...                   # 其他配置文件

Vue的代码实现主要放置在packages 这个目录下，我们主要关注下这个目录。

这其实是一个Monorepo 结构，在根目录下的pnpm-workspace.yaml 中就能看到指向packages 的配置：

为什么要采用Monorepo 呢？因为Monorepo 具有以下三大优点：

版本控制方便：所有项目在同一个仓库中，便于管理和协作。

依赖共享：第三方包只需安装一次，所有子项目均可使用，避免重复安装。

代码共享：公共的工具函数、配置等可以在所有子项目中共享，减少代码冗余

如果还不太了解Monorepo 的同学可以看看之前我之前写过的一篇关于Monorepo 的文章

MonoRepo + Vue3 + Element plus + Node + express 全站架构实现商品管理系统

三、packages 目录（重点）

下面我们来介绍下这些目录的作用是什么：

compiler-core： 编译器的核心逻辑，包括模板解析、代码生成和转换。
compiler-dom： 针对浏览器的编译器，添加了 DOM 相关的特性。
compiler-sfc： Vue 3 中处理单文件组件的核心模块。它的作用是将 .vue 文件解析为模板、脚本和样式，并分别编译为 JavaScript 模块。
compiler-ssr: 实现服务端渲染的核心模块。它的作用是将 Vue 组件编译为适合在服务端运行的代码，并生成 HTML 字符串。
reactivity: 响应式系统，实现 ref、reactive、computed 等响应式 API。
runtime-core: 运行时核心逻辑，实现组件实例化、响应式系统、虚拟 DOM 渲染等功能。
runtime-dom: 针对浏览器的运行时逻辑，基于 runtime-core，添加了浏览器相关的 DOM 操作。
runtime-test: 测试代码
server-renderer： 服务端渲染（SSR）相关逻辑，实现服务端渲染的核心功能。
shared： 编写一些共享的工具函数，和我们平常开发的时候写的utils 差不多
vue: Vue 3 的完整构建包，整合 compiler 和 runtime，提供完整的 Vue 3 功能。
vue-compat： 处理vue2 兼容相关的一些代码

四、编写第一个测试例子：

执行 pnpm install
执行pnpm run build 打包完成之后会在packages/vue/下多了dist 目录，这就是我们执行pnpm run build 打包的产物。

4. 在packages/vue/examples 下面新建一个目录test,test 下面新建reactive.html

编写reactive.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../dist/vue.global.js"></script>
</head>
<body>
  <p id="desc"></p>
  <button onclick="updateDesc()">变成Vue3</button>
  <script>
    const { reactive, effect } = Vue

    const data = reactive({
      desc: 'Vue'
    })

    effect(() => {
      document.getElementById('desc').innerHTML = data.desc
    })

    function updateDesc () {
      data.desc = 'Vue3'
    }
  </script>
</body>
</html>