vue基础（五）

Vue 实例在创建、挂载、更新、销毁的过程中会触发一系列的生命周期钩子（Lifecycle Hooks），让开发者可以在不同阶段执行逻辑。

1. Vue 2 生命周期完整流程

生命周期的四个主要阶段

1. 创建阶段（Creation）
2. 挂载阶段（Mounting）
3. 更新阶段（Updating）
4. 销毁阶段（Destruction）

2. Vue 2 生命周期钩子（Hooks）

阶段	生命周期钩子	作用
创建前	beforeCreate	组件刚创建，还没有 data、methods、computed 等
创建后	created	data、methods 已初始化，但 DOM 还未渲染
挂载前	beforeMount	template 解析完毕，还未挂载到真实 DOM 上
挂载后	mounted	组件挂载到 DOM，可以操作 DOM
更新前	beforeUpdate	data 变化，DOM 还未更新
更新后	updated	data 变化，DOM 已更新
销毁前	beforeDestroy	组件即将销毁，可清理定时器、解绑事件
销毁后	destroyed	组件已销毁，所有子组件也被销毁

3. Vue 2 生命周期示例 

4. Vue 3 生命周期

Vue 3 依然有生命周期钩子，但使用 setup() 时需要使用 Vue 3 提供的 onXxx 形式的钩子（从 vue 引入）。

Vue 3 生命周期对比

Vue 2	Vue 3 (Composition API)
beforeCreate	setup() 直接初始化
created	setup() 直接初始化
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

Vue 3 生命周期示例 

5. 生命周期使用场景

钩子	适用场景
beforeCreate	组件初始化前，可用于 console.log 调试
created	获取 data，初始化 Vuex，发起 Ajax 请求
beforeMount	在 DOM 渲染前执行一些逻辑
mounted	获取 DOM，初始化 第三方库（如 ECharts）
beforeUpdate	data 变化时，执行一些更新前的计算
updated	DOM 更新后执行操作（如日志记录）
beforeDestroy	清除 setInterval、解绑 window 事件
destroyed	组件销毁后的清理操作

6. Vue 生命周期面试题

Q1: created 和 mounted 有什么区别？

钩子	执行时机	适用场景
created	组件实例创建完成，但 DOM 还未渲染	可用于获取 data、调用 Vuex
mounted	组件挂载到 DOM 后	适用于 DOM 操作，如 ECharts

如果要操作 DOM，需要在 mounted 中进行。

Q2: beforeDestroy 用来做什么？

beforeDestroy 适用于：

• 清除定时器
• 解绑全局事件
• 销毁第三方库

beforeDestroy() {
  clearInterval(this.timer); // 清除定时器
  window.removeEventListener("resize", this.handleResize); // 解绑事件
}