vue基础（五）
Vue 实例在创建、挂载、更新、销毁的过程中会触发一系列的生命周期钩子（Lifecycle Hooks），让开发者可以在不同阶段执行逻辑。
1. Vue 2 生命周期完整流程
生命周期的四个主要阶段
- 创建阶段（Creation）
- 挂载阶段（Mounting）
- 更新阶段（Updating）
- 销毁阶段（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); // 解绑事件
}