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 生命周期示例 

<template><div><h1>{{ message }}</h1><button @click="changeMessage">修改消息</button></div>
</template><script>
export default {data() {return {message: "Hello Vue!"};},methods: {changeMessage() {this.message = "Vue 生命周期演示";}},beforeCreate() {console.log("1. beforeCreate - data 还未初始化", this.message); // undefined},created() {console.log("2. created - data 初始化完成", this.message);},beforeMount() {console.log("3. beforeMount - 模板编译完成，尚未挂载");},mounted() {console.log("4. mounted - 组件已挂载到 DOM，可进行 DOM 操作");},beforeUpdate() {console.log("5. beforeUpdate - data 变化，DOM 还未更新", this.message);},updated() {console.log("6. updated - data 变化，DOM 已更新", this.message);},beforeDestroy() {console.log("7. beforeDestroy - 组件即将销毁，可清理定时器等");},destroyed() {console.log("8. destroyed - 组件已销毁");}
};
</script>

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 生命周期示例 

<template><div><h1>{{ message }}</h1><button @click="changeMessage">修改消息</button></div>
</template><script>
import { ref, onMounted, onBeforeUnmount, onUpdated } from "vue";export default {setup() {const message = ref("Hello Vue 3!");const changeMessage = () => {message.value = "Vue 3 生命周期演示";};onMounted(() => {console.log("组件已挂载");});onUpdated(() => {console.log("组件更新了");});onBeforeUnmount(() => {console.log("组件即将销毁");});return { message, changeMessage };}
};
</script>

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); // 解绑事件
}