前期准备

熟悉源码仓库结构

vue3 采用的是 monorepo 结构，所有的代码都在一个仓库中，不同的功能模块放在不同的目录中。主要目录包括：

packages：包含所有公开发布的子包（如 reactivity、runtime-core 等）。
scripts：包含构建脚本和工具。

packages-private：包含内部开发和构建相关的私有包。

TIP

packages-private 这种设计可以：

保持核心代码的整洁性。
内部实验新功能而不影响公开 API。
管理内部工具而不暴露给最终用户。

因为是阅读主要功能、API 的源码，所以着重看一下 packages 目录下的子包。

+---compiler-core 核心编译器（AST 转换、codegen）
|
+---compiler-dom DOM编译器
|
+---compiler-sfc 单文件组件编译器
|
+---compiler-ssr 服务端渲染编译器
|
+---reactivity 响应式系统
|
+---runtime-core 运行时核心（虚拟 DOM + 组件系统核心逻辑）
|
+---runtime-dom DOM运行时（patch、事件绑定）
|
+---runtime-test 测试运行时
|
+---server-renderer 服务端渲染
|
+---shared 共享工具
|
+---vue 最终打包入口（整合 runtime + compiler）
|
\---vue-compat Vue2兼容层

本地调试准备

下载源码、安装依赖

bash

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

安装依赖过程中可能会报错，提示安装 puppeteer 失败，可以跳过安装，具体请看。

进行调试

启动开发服务器

pnpm dev

这个命令会执行仓库里 scripts/dev.js（或 package.json 中的 dev script），它通常会：构建并监听某些包（比如 packages/vue、packages/runtime-dom 等），并启一个本地静态/开发服务器用于预览 examples/playground。
当控制台出现built: packages\vue\dist\vue.global.js，表示 packages/vue 已成功构建出浏览器可用的全局包（global build）,在 packages/vue/dist 目录下，会生成 vue.global.js、vue.global.js.map 等文件。。

新建调试页面在packages/vue/examples目录下新建一个demo.html文件，用于调试（使用Live Server插件，进行启动）。

javascript

<div id="app">{{ count }}</div>
<script src="../dist/vue.global.js"></script>
<script>
  const { createApp, reactive } = Vue

  const state = reactive({ count: 0 })

  createApp({
    setup() {
      setInterval(() => state.count++, 1000)
      return state
    },
  }).mount('#app')
</script>

在源码中添加调试代码
有两种方式进行调试，一种是在浏览器中进行调试，另一种是在 vscode 中进行调试。
3.1 在浏览器中进行调试
如图所示，找到源代码打断点，刷新页面，即可触发断点调试。
3.2 在 vscode 中进行调试
待定

前期准备 ​

熟悉源码仓库结构 ​

本地调试准备 ​

下载源码、安装依赖 ​

进行调试 ​

前期准备

熟悉源码仓库结构

本地调试准备

下载源码、安装依赖

进行调试