**一、生命周期阶段与钩子函数**
**1. 初始化阶段（创建前/后）**
- **`beforeCreate`（创建前）**
- **执行时机**：Vue 实例刚被创建，尚未初始化「数据观测（data observer）」和「事件系统」。
- **特点**：无法访问 `data`、`methods` 等实例属性。
- **应用场景**：一般较少使用，如需在数据观测前做一些初始化操作（如配置自定义事件）。
- **`created`（创建后）**
- **执行时机**：完成数据观测、事件方法初始化，`data` 和 `methods` 已可用。
- **特点**：此时实例尚未挂载到 DOM，`$el` 属性不存在（若通过 `el` 选项创建实例，`$el` 会在 `mounted` 阶段出现）。
- **应用场景**：常用于初始化数据、发送异步请求（如获取接口数据）、添加自定义事件监听等。
**2. 挂载阶段（挂载前/后）**
- **`beforeMount`（挂载前）**
- **执行时机**：模板编译完成（将 `template` 或 `el` 转换为渲染函数 `render`），但尚未将 DOM 渲染到页面。
- **特点**：页面中仍为原始 HTML（未被 Vue 生成的 DOM 替换），可通过 `$el` 访问容器，但内容未更新。
- **应用场景**：一般较少使用，如需在挂载前对模板做最后修改（需配合 `render` 函数）。
- **`mounted`（挂载后）**
- **执行时机**：Vue 实例已挂载到真实 DOM，页面渲染完成。
- **特点**：可通过 `$el` 访问最终的 DOM 元素，子组件也已全部挂载。
- **应用场景**：常用于操作 DOM（如初始化第三方库，如 `echarts`、`element-ui` 组件）、绑定自定义 DOM 事件等。
**3. 更新阶段（更新前/后）**
- **`beforeUpdate`（更新前）**
- **执行时机**：当 `data` 变化导致重新渲染前触发。
- **特点**：此时 `data` 已更新，但页面上的 DOM 尚未更新（仍为旧值）。
- **应用场景**：可获取更新前的 DOM 状态，或在更新前做一些数据处理（避免触发多次更新）。
- **`updated`（更新后）**
- **执行时机**：页面 DOM 已根据最新数据更新完毕。
- **特点**：可访问更新后的 DOM，但需注意避免在此处修改数据（可能导致无限循环更新）。
- **应用场景**：常用于数据更新后对 DOM 进行二次操作（如计算更新后的布局尺寸）。
**4. 销毁阶段（销毁前/后）**
- **`beforeDestroy`（销毁前）**
- **执行时机**：实例即将被销毁，仍可正常使用 `data` 和 `methods`。
- **特点**：所有子组件、事件监听、定时器等尚未被清理。
- **应用场景**：用于清理自定义事件、移除定时器、取消异步请求（避免内存泄漏）。
- **`destroyed`（销毁后）**
- **执行时机**：实例已被完全销毁，所有子组件、数据观测、事件监听等均被移除。
- **特点**：无法再访问 `data` 和 `methods`，`$el` 仍存在但不再与 Vue 实例关联。
- **应用场景**：一般无需手动操作，Vue 会自动清理，仅用于确认销毁完成。
**5. 缓存组件专属钩子（`keep-alive` 缓存时）**
- **`activated`（激活时）**
- **执行时机**：被 `keep-alive` 缓存的组件重新激活（如从后台切回前台）时触发。
- **应用场景**：用于恢复组件状态或重新加载数据（避免重复初始化）。
- **`deactivated`（失活时）**
- **执行时机**：被 `keep-alive` 缓存的组件停止使用（如切换到其他路由）时触发。
- **应用场景**：用于暂停组件中的实时更新（如停止定时器）。
**二、生命周期流程图**
plaintext
创建实例 → beforeCreate → created → beforeMount → mounted
↓ ↑
├─数据更新─→ beforeUpdate → updated ──→ ...
└─销毁实例─→ beforeDestroy → destroyed
**三、常用生命周期钩子的典型场景**
1. **`created`**：
- 发送 AJAX 请求获取数据（需注意在 `beforeDestroy` 中取消未完成的请求）。
- 初始化复杂的本地数据（如基于路由参数的计算）。
2. **`mounted`**：
- 操作 DOM（如获取元素尺寸、初始化第三方插件）。
- 绑定自定义 DOM 事件（如 `window.resize`，需在 `beforeDestroy` 中解绑）。
3. **`beforeUpdate`**：
- 在数据更新前，获取当前 DOM 状态（如旧的滚动位置）。
4. **`beforeDestroy`**：
- 清理定时器（`clearInterval`）、解绑自定义事件、取消订阅（如 Vuex 中的订阅）。
5. **`activated/deactivated`**：
- 优化缓存组件的性能（如在失活时暂停动画，激活时恢复）。
**四、注意事项**
- **避免在 `updated` 中修改数据**：可能导致无限循环更新，触发多次 `beforeUpdate` 和 `updated`。
- **`keep-alive` 影响**：未被缓存的组件不会触发 `activated/deactivated`，而是正常走创建和销毁流程。
- **服务端渲染（SSR）**：仅 `created` 和 `beforeMount` 会在服务端执行，其他钩子在客户端执行。
掌握生命周期钩子的执行顺序和应用场景，能帮助开发者更高效地管理组件状态、处理 DOM 交互和优化性能。