Vue3源码梳理：源码目录结构及源码阅读方法

Wang's Blog

墨衍会员 · AI 创作全网分发码龄12年

关注

原创最新推荐文章于 2026-08-19 12:21:46 发布 2k 阅读 AI 写同款· GEO 优化 ›

超详细Vue3响应式原理介绍加源码阅读本章介绍Vue中另一个非常重要的模块，响应式。介绍了基本原理（含图）简单实现以及如何阅读源码。阅读详情

VUE3 源码目录结构

1 ) 下载源码三种方式

方式1，Download ZIP，不推荐
方式2，通过https,或ssh或github cli来克隆项目
- $ git clone https://github.com/vuejs/core.git
- $ git clone git@github.com:vuejs/core.git
方式3，点击Fork, 到自己仓库，再执行上面两步的方式下载

2 ）源码目录解析

tsconfig.json ts 配置文件
rollup.config.js rollup 配置文件
packages 包
- compiler-core: 编译器的核心库
- compiler-dom: 编译器浏览器相关
- compiler-ssr: 服务端渲染的编译模块
- compiler-sfc: .vue组件的编译模块
- reactivity: 响应性的核心模块
- reactivity-transform: 已过期的模块，无需过于关注
- runtime-core: 运行时核心库，内部针对不同平台进行实现
- runtime-dom：基于浏览器的运行时
- runtime-test：测试用的
- server-renderer：服务端渲染库
- sfc-playground：sfc 工具，暂时无需关注，参考：https://sfc.vuejs.org
- shared: 存放共享工具方法等
- size-check: 运行时包大小的检查库，暂无需关注
- template-explorer: 提供的线上测试，暂无需关注，https://template-explorer.vuejs.org, 用于把template转化为render
- vue: 包含测试实例，以及打包后的dist文件，src中对外暴露入口的方法
- vue-compat: vue2的兼容性代码，以及vue的合并代码
- global.d.ts 全局的ts声明
netlify.toml 自动化部署相关
jest.config.js 测试相关
api-extractor.json ts的api分析工具
SECURITY.md 报告漏洞，维护安全的声明
CHANGELOG.md 更新日志
BACKERS.md 赞助声明
test-dts 测试相关
scripts 配置文件相关
pnpm-workspace.yaml pnpm 相关配置
pnpm-lock.yaml 使用 pnpm 下载的依赖包版本锁文件

创建测试实例

1 ） 需要全局安装下 pnpm

pnpm.io/zh/motivation
安装完成，直接执行 pnpm i
之后运行：npm run build
编写我们的用例，在vue/examples下新建我们测试的代码目录
- 新建reactivity目录, 在其下新建 reactive.html
- 编写如下代码

2 ）编写简单测试代码

<script src='../../dist/vue.global.js'></script>

<body>
  <div id='app'></div>
</body>

<script>
  const { reactive, effect } = Vue
  const obj = reactive({
    name: '张三'
  })
  effect(()=>{
    document.querySelector('#app').innerText = obj.name
  })
  const timer = setTimout(() => {
    clearTimeout(timer)
    obj.name = '李四'
  })
</script>

3 ）开启sourceMap

只有开启sourceMap才能进行debugger
这样，我们就可以借助sourceMap查看打包之前的代码，而非打包之后的代码
我们打包用的命令在package.json中，是：node scripts/build.js
在这个文件中，我们可以看到: sourceMap ? SOURCE_MAP:true : ``, 这里开启 sourceMap的关键就在这个变量里
这里的代码：SOURCE_MAP:true 最终会被 rollup 构建
在rollup.config.js 中包含sourceMap的逻辑，大概在94行
output.sourcemap = !!process.env.SOURCE_MAP
这个变量 sourcemap 在 build.js中是取决于 args.sourcemap 或 args.s
而 args 是在使用了 minimist 库来生成的：const args = require('minimist')(process.argv.slice(2))
这个 minimist 包是在 npmjs.com/package/minimist 中查看 example
而在vue中开启sourceMap, 其实非常简单，只需要在build命令后面添加 -s 参数即可
- "build": "node scripts/build.js -s"

4 ） 进行debugger

基于之前的live-server打开的http访问的页面：http://127.0.0.1:5500/**/code/vue-next-3.2.37/packages/vue/examples/reactivity/reactive.html
- 我们点击chrome的Sources面板，向下可看到Page, Filesystem子面板，选择Page面板，查看当前页面对应的html文件里的代码，我们可看到 reactive.html 文件
- 只有这一个html文件以及dist/vue.global.js的js文件
重新运行 build 命令, 在dist目录中，发现生成了一些 map.js 文件
- 同样，按上述步骤操作，查看 Page 子面板，等一会儿发现，同步了一堆文件：
- vue, compiler-core/src, compiler-dom/src, reactivity/src, runtime-core/src, runtime-dom/src, shared/src
现在我想调试，如上代码中的 reactive api, 我在 reactivity/src/reactive.ts 中找到 reactive 函数并打上一个断点，即可调试了