Vue 2 源码解读指南

📂 核心模块解析路径与功能说明

1. 构造函数入口

文件 : src/core/instance/index.js
功能 :
- 定义 Vue 构造函数，并通过 mixin 模式将实例方法（如 _init）挂载到原型链。
- 组合初始化系统、状态管理、生命周期等核心模块。

2. 初始化系统

关键文件 :
- init.js → initMixin(Vue): 初始化生命周期、事件、渲染函数、注入等核心配置。
- state.js → stateMixin(Vue): 定义 $data、$props、$watch 等数据相关 API。
- lifecycle.js → lifecycleMixin(Vue): 实现组件挂载（_update）、销毁等生命周期逻辑。
- render.js → renderMixin(Vue): 提供 _render 方法生成虚拟 DOM，并绑定 $nextTick。

3. 响应式系统

目录 : src/core/observer/
核心文件:
- index.js: Observer 类对数据进行递归劫持，依赖 Object.defineProperty 实现 getter/setter。
- dep.js: 管理依赖（Watcher 实例），实现发布-订阅模式。
- watcher.js: 分为渲染 Watcher、计算属性 Watcher 和用户 Watcher，负责触发更新。
- scheduler.js: 异步队列调度，合并重复更新（如多次 this.data++ 触发一次渲染）。
流程图优化:

scss 复制代码

new Vue → _init() → initState → observe(data)
                          │
                          ├── 递归劫持对象属性（Object.defineProperty）
                          │
                          ├── getter → Dep.depend() 收集当前 Watcher
                          │
                          └── setter → Dep.notify() → 触发 Watcher.update()
                                       │
                                       └── scheduler 批量执行队列（nextTick）

4. 模板编译系统

目录 : src/compiler/
流程详解:
- 解析阶段 (parser/): 将 HTML 模板转换为 AST（抽象语法树），处理指令、插值等语法。
- 优化阶段 (optimizer.js): 标记静态节点和静态根节点，减少 diff 计算量。
- 生成阶段 (codegen/): 将 AST 转换为可执行的 render 函数字符串。
示例:

javascript 复制代码

// AST 节点示例
{
  tag: 'div',
  type: 1,
  static: false,
  children: [{ type: 2, expression: '_s(message)', text: '{{ message }}' }]
}

5. 虚拟 DOM 与渲染机制

目录 : src/core/vdom/
关键点:
- vnode.js: 定义虚拟节点结构（tag、data、children 等）。
- patch.js:
  - Diff 算法: 仅同层级比较，通过 key 复用节点，优先处理头尾交叉情况。
  - Patch 阶段 : 将差异应用到真实 DOM，触发 create、update、destroy 钩子。
渲染流程:

scss 复制代码

_render() → 生成新 VNode → _update() → patch(oldVNode, newVNode)
                                     │
                                     ├── 无旧节点 → 直接创建 DOM
                                     │
                                     └── 有旧节点 → Diff 对比 → 更新 DOM

6. 组件系统

关键逻辑:
- 组件注册 : 全局/局部组件通过 Vue.component() 缓存构造函数。
- 生命周期管理 : 父子组件的 created → mounted 顺序（先子后父）。
通信机制:
- Props : 父组件通过 createComponent 传递数据，子组件通过 initProps 接收。
- 事件 : 子组件通过 $emit 触发父组件监听的自定义事件。

7. 事件机制

文件 : src/core/instance/events.js
扩展说明 :
- 原生事件 : 通过 v-on:click.native 绑定到组件根元素。
- 自定义事件 : 通过 vm._events 维护监听器，$emit 触发时执行回调。

8. Vuex 状态管理（独立库）

核心实现 :
- 响应式 State : 通过 Vue.util.defineReactive 实现状态监听。
- 严格模式 : 通过 _withCommit 确保状态变更仅通过 mutation。
- 插件机制 : 通过 subscribe 和 plugins 数组支持中间件扩展。

9. Vue Router 路由系统（独立库）

核心机制 :
- 路由匹配 : createMatcher 根据路由配置生成匹配映射表。
- 视图更新 : <router-view> 作为函数式组件，根据当前路由动态渲染对应组件。
- 导航守卫 : 通过队列顺序执行 beforeEach、beforeRouteEnter 等钩子。