三分钟搞懂Vue2核心流程（图文解析版）

序言

图文结合，帮助您快速了解Vue2的核心流程，附源码位置。通过阅读本文章，您可以了解到以下内容：

• new Vue()的过程
• 模板编译到渲染的过程
• 响应式的流程
• 核心模块之间的关联

一、初始化阶段（new Vue()）

流程图描述：

1. ‌创建Vue实例‌：通过new Vue()创建一个新的Vue实例。
2. ‌初始化选项‌：合并用户传入的选项与默认选项。
3. ‌初始化生命周期‌：设置实例的生命周期钩子。
4. ‌初始化事件和渲染‌：初始化事件系统和渲染函数。
5. ‌初始化数据‌：递归地将data对象的属性转换为getter/setter，实现响应式。
6. ‌调用钩子‌：在数据初始化后，调用beforeCreate和created钩子。
7. ‌挂载组件‌：如果没有指定el选项，则手动调用$mount方法挂载组件；否则，在内部自动挂载。

源码位置指引：

• src/core/instance/init.js：Vue实例的初始化逻辑。
• src/core/observer/index.js：数据响应式系统的核心实现。
• src/core/instance/lifecycle.js：生命周期钩子的定义和调用。
• src/platforms/web/runtime/index.js：$mount方法的定义和挂载逻辑。

---

二、模板编译与渲染

流程图描述：

1. ‌模板解析‌：将模板字符串解析为抽象语法树（AST）。
2. ‌优化‌：标记静态节点，以便在后续的Diff算法中跳过不必要的比较。
3. ‌代码生成‌：将AST转换为渲染函数代码。
4. ‌创建渲染函数‌：通过new Function动态创建渲染函数。
5. ‌首次渲染‌：调用渲染函数生成虚拟DOM树，并通过patch算法将其挂载到真实DOM上。

源码位置指引：

• src/compiler/parser/index.js：模板解析逻辑。
• src/compiler/optimizer.js：AST优化逻辑。
• src/compiler/codegen/index.js：渲染函数代码生成逻辑。
• src/core/instance/render.js：渲染函数的调用和虚拟DOM的生成。
• src/platforms/web/runtime/patch.js：patch算法的实现和DOM挂载。

---

三、响应式系统

流程图描述：

1. ‌数据劫持‌：使用Object.defineProperty劫持data对象的属性，设置getter和setter。
2. ‌依赖收集‌：在组件渲染过程中，访问响应式数据时，自动收集依赖（Watcher）。
3. ‌派发更新‌：当响应式数据变化时，通知依赖的Watcher进行更新。
4. ‌组件重新渲染‌：Watcher触发组件的重新渲染流程。

源码位置指引：

• src/core/observer/index.js：响应式系统的核心实现，包括数据劫持和依赖收集。
• src/core/observer/dep.js：依赖收集器Dep的定义。
• src/core/observer/watcher.js：Watcher类的定义，负责监听数据变化和触发更新。
• src/core/instance/state.js：组件状态管理的入口，包括data、props、computed等。

---

四、核心模块关联关系

流程图描述：

1. ‌响应式系统‌：Vue实例的数据对象通过响应式系统实现数据的双向绑定和自动更新。
2. ‌模板编译‌：模板字符串通过编译过程转换为渲染函数，渲染函数依赖于响应式数据。
3. ‌虚拟DOM（VNode）‌：渲染函数生成虚拟DOM树，虚拟DOM树与真实DOM树通过patch算法保持同步。
4. ‌生命周期钩子‌：在Vue实例的不同阶段触发相应的生命周期钩子，允许开发者在特定时刻执行代码。