---
title: "怎么读 Vue 3.5.44 源码仓库：从 monorepo 全景入手 - Angryecho"
description: "想搞清「为什么 @vue/runtime-core 里搜不到 document 却能渲染 DOM」，不必先啃响应式细节。更稳的做法是：先把 vuejs/core@3.5.44 的目录、包职责和构建入口摸清楚，再按依赖方向往下读。下面步骤依据掘金长文对 3.5.44 仓库的拆解整理，可直接对着 GitHub 源码核对。["
canonical_url: "https://www.angryecho.com/c/Vue/p/P2TBBomPZl7YUJpD7W2kJ"
meta:
  "og:description": "想搞清「为什么 @vue/runtime-core 里搜不到 document 却能渲染 DOM」，不必先啃响应式细节。更稳的做法是：先把 vuejs/core@3.5.44 的目录、包职责和构建入口摸清楚，再按依赖方向往下读。下面步骤依据掘金长文对 3.5.44 仓库的拆解整理，可直接对着 GitHub 源码核对。["
  "og:image": "https://www.angryecho.com/_og/d/c_Post%2Ctitle_~5ZCQ5qe9572R%2Cdescription_~5ZCQ5qe95LiA5LiL77yM5bCx5LiK5ZCQ5qe9572R44CC%2CpostId_P2TBBomPZl7YUJpD7W2kJ%2Crevision_~MjAyNi0xMC0zMFQwMjo1NTo1OS4xNDkwNzZa%2Cp_Ii9jL1Z1ZS9wL1AyVEJCb21QWmw3WVVKcEQ3VzJrSiI%2Cs_sbZBZBEXnx06OZV9.png"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "怎么读 Vue 3.5.44 源码仓库：从 monorepo 全景入手"
---

> Index of every page on this site: [llms.txt](https://www.angryecho.com/llms.txt)

# **怎么读 Vue 3.5.44 源码仓库：从 monorepo 全景入手**

想搞清「为什么 `@vue/runtime-core` 里搜不到 `document` 却能渲染 DOM」，不必先啃响应式细节。更稳的做法是：先把 `vuejs/core@3.5.44` 的目录、包职责和构建入口摸清楚，再按依赖方向往下读。下面步骤依据掘金长文对 3.5.44 仓库的拆解整理，可直接对着 GitHub 源码核对。\[1]

## 准备工作

1. 打开仓库： https://github.com/vuejs/core ，检出或浏览 tag / 版本 **3.5.44**（行号与目录以该版本为准）。
2. 本机可选：Node ≥ 20、启用 Corepack 后用仓库锁定的 pnpm 安装依赖（根 `package.json` 的 `packageManager` 字段会写明版本）。
3. 准备一个能全局搜索的编辑器，方便按包名与 `__DEV__` 等符号跳转。

确认成功：仓库根目录能看到 `packages/`、`packages-private/`、`pnpm-workspace.yaml`、`rollup.config.js`。

## 操作步骤

### 1、先画「物理地图」：看顶层目录

打开仓库根目录，重点看三块：`packages/`（会发布到 npm 的核心包）、`packages-private/`（演练场、dts 测试等，不发布）、以及根上的 `rollup.config.js` / `vitest.config.ts` / `scripts/`（构建、测试、发版脚本集中在顶层，而不是每个包各配一套）。\[1]

为什么先看这里：后面所有「产物长什么样、测试怎么跑」都挂在这些顶层配置上。  
确认成功：你能说出 `packages` 与 `packages-private` 的差别——后者 `package.json` 带 `"private": true`，发布脚本不会扫进去。

### 2、按职责记住 11 个公开包

用一张职责表建立坐标（不必一次读完源码）：

| 包 | 单一职责（记关键词） |
| --- | --- |
| `@vue/shared` | 无状态工具、flags，无 `@vue` 依赖 |
| `@vue/reactivity` | 独立响应式，可被其他框架复用 |
| `@vue/runtime-core` | `createRenderer`、组件与调度，**平台无关** |
| `@vue/runtime-dom` | 注入 DOM 版 `nodeOps` / `patchProp` |
| `@vue/compiler-*` | core → dom → ssr → sfc 编译流水线 |
| `@vue/server-renderer` | `renderToString` 等 SSR 运行时 |
| `vue` | 面向用户的全量入口 |
| `@vue/compat` | Vue 2 兼容构建 |

为什么：Vue 3 按**抽象层级**切包，而不是按功能点切；依赖只能向下流。  
确认成功：打开 `packages/runtime-core/package.json`，`dependencies` 里应只有 `@vue/shared` 与 `@vue/reactivity`，没有 `runtime-dom`。\[1]

### 3、用「平台无关」这条线验证设计

在 `runtime-core` 里搜索 `createRenderer`：它接收宿主的 `RendererOptions`（`createElement`、`insert`、`patchProp` 等），自身不出现 `document.createElement`。再到 `packages/runtime-dom` 与 `packages/runtime-test`，两者都是把各自的 `nodeOps`/`patchProp` 喂给同一个 `createRenderer`。\[1]

为什么：这解释了单元测试能跑内存树、小程序/Canvas 自定义渲染器能复用同一套算法。  
确认成功：你能用一句话说明——「DOM 操作被关在 runtime-dom，core 只认抽象节点」。

### 4、看清构建会产出哪些文件

阅读根目录 `rollup.config.js` 里的 format 表，以及 `packages/vue/package.json` 的 `buildOptions.formats`。常见会看到 `esm-bundler`、`esm-bundler-runtime`、`cjs`、`global`、`esm-browser` 等；带 `runtime` 的不含编译器，带 `.prod` 的是压缩产物。再对照 `exports` 字段：bundler 默认常指向 `vue.runtime.esm-bundler.js`。\[1]

为什么：同一份源码要服务 Vite 项目、CDN IIFE、Node SSR 等多种消费者。  
确认成功：本地执行文档/脚本里的构建命令后（或直接看已发布的 `dist/`），能指出「带 compiler 的全量包」和「runtime-only 包」各是哪个文件名。

### 5、理解编译期开关，避免被 `__DEV__` 吓到

源码里大量 `if (__DEV__)`、`__FEATURE_OPTIONS_API__` 等标识符在仓库内从未赋值，靠构建期 `define` / `replace` 换成字面量后再做死代码消除。`packages/global.d.ts` 给 TypeScript 提供声明；bundler 版会把部分 feature flag 留给下游 Vite/webpack 注入。\[1]

为什么：这是 prod 包体积明显小于 dev 包的直接原因。  
确认成功：在 `rollup.config.js` 的 `resolveDefine` 一段能找到 `__DEV__` / `__FEATURE_*` 的替换表；并知道「未注入 flag 时 runtime 有兜底默认值」。

## 注意事项

- 行号、目录以 **3.5.44** 为准，主分支可能已变。
- 官方文档站在独立仓库 `vuejs/docs`，核心仓里的 `docs/` 不一定是官网源码。
- 本文只覆盖「仓库怎么铺开」；reactivity、compiler、renderer 细节需按包继续往下读。\[1]

> 以下步骤基于 vuejs/ [core@3.5.44](mailto:core@3.5.44) 与公开源码剖析文，于2026年10月27日核对仓库结构描述。

## 来源

> \[1] [Vue 3 核心源码深度剖析系列（v3.5.44）-第 1 章　项目全景：monorepo 架构与工程化体系](https://juejin.cn/post/7697086168454397990)，掘金 / 鶴哥只手遮天，2026年10月16日。

#Vue3 #源码 #monorepo #runtime-core #教程

排序方式 :

### **成为第一条评论！**

Nobody's responded to this post yet. Add your thoughts and get the conversation going.

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.angryecho.com/c/Vue/p/P2TBBomPZl7YUJpD7W2kJ#post","@type":"DiscussionForumPosting","commentCount":0,"dateModified":"2026-10-30T02:55:59.149Z","datePublished":"2026-10-20T04:00:00.000Z","description":"想搞清「为什么 @vue/runtime-core 里搜不到 document 却能渲染 DOM」，不必先啃响应式细节。更稳的做法是：先把 vuejs/core@3.5.44 的目录、包职责和构建入口摸清楚，再按依赖方向往下读。下面步骤依据掘金长文对 3.5.44 仓库的拆解整理，可直接对着 GitHub 源码核对。[","headline":"怎么读 Vue 3.5.44 源码仓库：从 monorepo 全景入手","isPartOf":"https://www.angryecho.com/c/Vue","mainEntityOfPage":"https://www.angryecho.com/c/Vue/p/P2TBBomPZl7YUJpD7W2kJ","text":"想搞清「为什么 @vue/runtime-core 里搜不到 document 却能渲染 DOM」，不必先啃响应式细节。更稳的做法是：先把 vuejs/core@3.5.44 的目录、包职责和构建入口摸清楚，再按依赖方向往下读。下面步骤依据掘金长文对 3.5.44 仓库的拆解整理，可直接对着 GitHub 源码核对。[1]\n\n准备工作\n\n\n\n\n\n打开仓库：https://github.com/vuejs/core ，检出或浏览 tag / 版本 3.5.44（行号与目录以该版本为准）。\n\n\n\n本机可选：Node ≥ 20、启用 Corepack 后用仓库锁定的 pnpm 安装依赖（根 package.json 的 packageManager 字段会写明版本）。\n\n\n\n准备一个能全局搜索的编辑器，方便按包名与 __DEV__ 等符号跳转。\n\n确认成功：仓库根目录能看到 packages/、packages-private/、pnpm-workspace.yaml、rollup.config.js。\n\n操作步骤\n\n1、先画「物理地图」：看顶层目录\n\n打开仓库根目录，重点看三块：packages/（会发布到 npm 的核心包）、packages-private/（演练场、dts 测试等，不发布）、以及根上的 rollup.config.js / vitest.config.ts / scripts/（构建、测试、发版脚本集中在顶层，而不是每个包各配一套）。[1]\n\n为什么先看这里：后面所有「产物长什么样、测试怎么跑」都挂在这些顶层配置上。\n确认成功：你能说出 packages 与 packages-private 的差别——后者 package.json 带 \"private\": true，发布脚本不会扫进去。\n\n2、按职责记住 11 个公开包\n\n用一张职责表建立坐标（不必一次读完源码）：\n\n\n\n\n\n\n\n包\n\n\n\n单一职责（记关键词）\n\n\n\n\n\n@vue/shared\n\n\n\n无状态工具、flags，无 @vue 依赖\n\n\n\n\n\n@vue/reactivity\n\n\n\n独立响应式，可被其他框架复用\n\n\n\n\n\n@vue/runtime-core\n\n\n\ncreateRenderer、组件与调度，平台无关\n\n\n\n\n\n@vue/runtime-dom\n\n\n\n注入 DOM 版 nodeOps / patchProp\n\n\n\n\n\n@vue/compiler-*\n\n\n\ncore → dom → ssr → sfc 编译流水线\n\n\n\n\n\n@vue/server-renderer\n\n\n\nrenderToString 等 SSR 运行时\n\n\n\n\n\nvue\n\n\n\n面向用户的全量入口\n\n\n\n\n\n@vue/compat\n\n\n\nVue 2 兼容构建\n\n为什么：Vue 3 按抽象层级切包，而不是按功能点切；依赖只能向下流。\n确认成功：打开 packages/runtime-core/package.json，dependencies 里应只有 @vue/shared 与 @vue/reactivity，没有 runtime-dom。[1]\n\n3、用「平台无关」这条线验证设计\n\n在 runtime-core 里搜索 createRenderer：它接收宿主的 RendererOptions（createElement、insert、patchProp 等），自身不出现 document.createElement。再到 packages/runtime-dom 与 packages/runtime-test，两者都是把各自的 nodeOps/patchProp 喂给同一个 createRenderer。[1]\n\n为什么：这解释了单元测试能跑内存树、小程序/Canvas 自定义渲染器能复用同一套算法。\n确认成功：你能用一句话说明——「DOM 操作被关在 runtime-dom，core 只认抽象节点」。\n\n4、看清构建会产出哪些文件\n\n阅读根目录 rollup.config.js 里的 format 表，以及 packages/vue/package.json 的 buildOptions.formats。常见会看到 esm-bundler、esm-bundler-runtime、cjs、global、esm-browser 等；带 runtime 的不含编译器，带 .prod 的是压缩产物。再对照 exports 字段：bundler 默认常指向 vue.runtime.esm-bundler.js。[1]\n\n为什么：同一份源码要服务 Vite 项目、CDN IIFE、Node SSR 等多种消费者。\n确认成功：本地执行文档/脚本里的构建命令后（或直接看已发布的 dist/），能指出「带 compiler 的全量包」和「runtime-only 包」各是哪个文件名。\n\n5、理解编译期开关，避免被 __DEV__ 吓到\n\n源码里大量 if (__DEV__)、__FEATURE_OPTIONS_API__ 等标识符在仓库内从未赋值，靠构建期 define / replace 换成字面量后再做死代码消除。packages/global.d.ts 给 TypeScript 提供声明；bundler 版会把部分 feature flag 留给下游 Vite/webpack 注入。[1]\n\n为什么：这是 prod 包体积明显小于 dev 包的直接原因。\n确认成功：在 rollup.config.js 的 resolveDefine 一段能找到 __DEV__ / __FEATURE_* 的替换表；并知道「未注入 flag 时 runtime 有兜底默认值」。\n\n注意事项\n\n\n\n\n\n行号、目录以 3.5.44 为准，主分支可能已变。  \n\n\n\n官方文档站在独立仓库 vuejs/docs，核心仓里的 docs/ 不一定是官网源码。  \n\n\n\n本文只覆盖「仓库怎么铺开」；reactivity、compiler、renderer 细节需按包继续往下读。[1]\n\n\n\n以下步骤基于 vuejs/core@3.5.44 与公开源码剖析文，于2026年10月27日核对仓库结构描述。\n\n来源\n\n\n\n[1] Vue 3 核心源码深度剖析系列（v3.5.44）-第 1 章　项目全景：monorepo 架构与工程化体系，掘金 / 鶴哥只手遮天，2026年10月16日。\n\n#Vue3 #源码 #monorepo #runtime-core #教程","url":"https://www.angryecho.com/c/Vue/p/P2TBBomPZl7YUJpD7W2kJ","author":{"@type":"Person","name":"hesdeadjim","url":"https://www.angryecho.com/u/H8Shesdeadjim"},"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":0},{"@type":"InteractionCounter","interactionType":"https://schema.org/DislikeAction","userInteractionCount":0},{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":0},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":0}]}]}
```

## Sitemap

See the full [sitemap](https://www.angryecho.com/sitemap.md) for all pages.