前言：为什么要了解 Vue 的源码结构？
如果你用过 Vue，你一定熟悉 ref、watch、v-if 等 API。
Vue 是一个渐进式框架，而源码也“渐进”展开。
本文不讲底层原理，而是带你认识 Vue 这座“房子”的房间分布、每个房间大概做什么。
👉 掌握结构，就不怕深入阅读时迷路。
整体结构一览
vue/
├── packages/
│ ├── vue/ # 核心对外暴露接口
│ ├── runtime-core/ # 渲染逻辑核心
│ ├── runtime-dom/ # DOM 平台特定逻辑
│ ├── compiler-core/ # 编译器核心
│ ├── compiler-sfc/ # .vue 文件编译逻辑
│ ├── reactivity/ # 响应式系统
│ └── shared/ # 工具方法 & 常量
├── scripts/ # 构建脚本
├── test-dts/ # TS 类型测试
└── tsconfig.json
Vue源码中也有很多Demo供我们调试,examples文件下都可以作为我们调试的Demo
📦 packages/vue：对外的“入口大门”
这是最终打包出来的 vue 包，负责把其他模块组装起来对外暴露，比如 createApp、ref 等 API。
👉 就像一个门面，把内部复杂的系统封装起来。
🔁 packages/reactivity：响应式系统的大脑
这里实现了 Vue 的响应式核心，比如：
reactive、ref
effect 副作用收集
依赖追踪、触发更新
👀 如果你对“为什么修改数据页面会自动更新”感兴趣，这就是入口。
packages/runtime-core：运行时核心骨架
它包含了：
虚拟 DOM
组件生命周期
渲染机制（render 函数）
scheduler 异步更新策略
简单理解，它负责把“模板”变成可以运行的“程序”。
packages/runtime-dom：专门给浏览器用的运行时
和 runtime-core 配合，它实现了：
真实 DOM 操作
浏览器事件处理
兼容平台差异（如 DOM 属性、事件名）
🎯 如果你想了解 patch 真实 DOM 的逻辑，可以看这里。
packages/compiler-* 系列：编译相关逻辑
compiler-core：通用编译逻辑
compiler-sfc：解析 .vue 单文件组件，提取 <template> / <script> / <style>
compiler-dom：编译 template 成浏览器运行的 render 函数
编译阶段把写的模板 <div>{{ msg }}</div> 编成底层 h('div', msg) 语法。
shared：公共工具库
提供全局工具函数（如 isObject、extend）和通用常量，是整个系统的粘合剂。
test-dts：类型测试仓库
Vue 的类型系统很复杂，这里是专门测试 TypeScript 类型正确性的地方，保障用户体验不崩。
