作为前端开发者，深入理解Vue框架的内部实现能极大提升开发能力。本文将从源码目录结构入手，详解Vue 2核心源码中src目录的组织结构和各文件模块的职责。
一、核心目录结构概览
src/
├── compiler/ # 编译相关
├── core/ # 核心代码
├── platforms/ # 平台相关代码
├── server/ # 服务端渲染
├── sfc/ # 单文件组件解析
└── shared/ # 共享工具方法
二、各目录详细说明
1. compiler - 模板编译核心
compiler/
├── codegen/ # 代码生成器
├── parser/ # 模板解析器
└── optimizer.js # 静态标记优化
- 将模板字符串转换为渲染函数
- 包含HTML解析器、文本解析器等
- 优化阶段会标记静态节点
2. core - 框架核心
core/
├── components/ # 内置组件(KeepAlive等)
├── global-api/ # 全局API(Vue.use等)
├── instance/ # 实例相关(生命周期/事件等)
├── observer/ # 响应式系统
├── util/ # 工具方法
├── vdom/ # 虚拟DOM相关
├── config.js # 全局配置
└── index.js # 入口文件
关键子目录说明：
observer/ - 响应式系统
- 实现
Object.defineProperty的响应式绑定 - 依赖收集和派发更新逻辑
Watcher和Dep核心类定义
vdom/ - 虚拟DOM
- 包含
patch算法 - VNode节点定义
- DOM操作封装
3. platforms - 多平台支持
platforms/
├── web/ # Web平台特有代码
│ ├── compiler/ # 平台相关编译选项
│ ├── runtime/ # 运行时相关
│ └── util/ # 平台工具
└── weex/ # Weex平台支持
- 不同平台有不同的
entry-runtime和entry-compiler文件 - Web平台包含DOM操作相关实现
4. server - 服务端渲染
server/
├── bundle-renderer/
├── optimizing-compiler/
├── template-renderer/
└── webpack-plugin/
- 服务端渲染专用代码
- 流式渲染实现
- 客户端激活(hydration)相关逻辑
5. sfc - 单文件组件解析
sfc/
├── parser.js # 单文件解析器
└── deindent.js # 去除缩进工具
- 将
.vue文件解析为组件选项对象 - 处理模板、脚本、样式的分离
6. shared - 共享工具
shared/
├── constants.js # 常量定义
└── utils.js # 通用工具函数
- 被多个模块引用的工具方法
- 跨平台使用的常量定义
三、关键文件说明
-
core/instance/index.js
Vue构造函数定义入口，混入原型方法 -
core/observer/index.js
响应式系统核心实现 -
core/vdom/patch.js
虚拟DOM diff算法实现 -
platforms/web/runtime/index.js
Web平台运行时入口
四、源码阅读建议路线
- 从
core/instance开始理解Vue实例构造 - 研究
observer理解响应式原理 - 分析
vdom了解渲染机制 - 查看
compiler学习模板编译过程
通过理解这些模块的协作关系，您将能更深入地掌握Vue的工作原理，编写更高效的Vue应用。
