当前位置：首页 > backend >正文

Vue 生命周期全解析：理解组件从创建到销毁的全过程

backend 2025/5/2 6:35:49

Vue 生命周期全解析：理解组件从创建到销毁的全过程

Vue.js 是一个流行的前端框架，它通过“组件化开发”提升了代码组织效率。要真正掌握 Vue，生命周期（Lifecycle） 是一个必须深入理解的核心概念。生命周期不仅决定了组件何时创建、更新和销毁，也直接关系到你该把逻辑写在什么钩子函数中。

本文将带你全面解析 Vue 的生命周期各阶段及其用途，并配合示例代码深入理解每一个钩子的意义。

一、什么是 Vue 的生命周期？

Vue 的生命周期是指一个组件从被创建、渲染、更新到销毁的过程，Vue 在整个过程中的特定时间点提供了 生命周期钩子函数，允许开发者插入自定义逻辑。

二、Vue 生命周期总览图

生命周期分为四个大阶段：

创建阶段（Create）
挂载阶段（Mount）
更新阶段（Update）
销毁阶段（Destroy）

对应的生命周期钩子函数如下（Vue 2 为例）：

beforeCreate → created → beforeMount → mounted → 
beforeUpdate → updated → 
beforeDestroy → destroyed

Vue 3 的 Composition API 使用 setup() 替代部分生命周期，本文主要基于 Vue 2 Options API 讲解，后文也会简要提及 Vue 3 的写法。

三、生命周期钩子详解

1. `beforeCreate`

在实例初始化之后，数据观测和事件/侦听器配置之前被调用。

beforeCreate() {console.log('组件刚创建，data 和 methods 都还没初始化');
}

此时无法访问 data、computed、methods 中的内容。
可用于初始化一些非响应式的数据，如插件注入或日志记录。

2. `created`

实例创建完成后调用，此时可以访问 data、methods、computed。

created() {console.log('data:', this.message); // 可以访问 datathis.initApp(); // 可以调用 methods
}

常用于发送初始化请求、数据预处理、事件监听。
但组件还未挂载到 DOM，无法操作页面元素。

3. `beforeMount`

模板编译完成，但还未挂载到 DOM 上。

beforeMount() {console.log('DOM 元素尚未渲染');
}

通常不太常用，因为下一步的 mounted 更为关键。

4. `mounted`

组件已经被挂载，DOM 元素已生成，可以操作页面。

mounted() {console.log('DOM 已经生成，可以进行 DOM 操作');this.initChart(); // 比如初始化 echarts、swiper 等
}

最常用的生命周期钩子之一
常用于：
- 获取 DOM 元素
- 初始化第三方插件
- 发起依赖 DOM 的请求

5. `beforeUpdate`

当数据更新前调用，此时 DOM 还未重新渲染。

beforeUpdate() {console.log('数据即将更新，DOM 还没变化');
}

用于更新前的数据快照或日志记录。
注意：不要在这里修改 data，会导致死循环。

6. `updated`

数据更改，DOM 也已经更新。

updated() {console.log('DOM 已根据数据更新完毕');
}

可用于操作更新后的 DOM。
注意：同样不要再次修改响应式数据，否则会陷入无限更新。

7. `beforeDestroy`

实例销毁之前调用，此阶段还可访问实例数据。

beforeDestroy() {console.log('组件即将销毁，清除定时器/事件');clearInterval(this.timer);
}

常用于解绑事件、销毁定时器、防止内存泄漏。

8. `destroyed`

组件销毁后调用，实例所有指令、事件监听器、子组件已被销毁。

destroyed() {console.log('组件已彻底销毁');
}

数据和 DOM 均不可访问。

四、完整示例代码

<template><div><h2>{{ message }}</h2><button @click="updateMessage">更新消息</button></div>
</template><script>
export default {data() {return {message: 'Hello Vue!',timer: null};},methods: {updateMessage() {this.message = 'Updated at ' + new Date().toLocaleTimeString();},initChart() {console.log('初始化图表或第三方库');}},beforeCreate() {console.log('beforeCreate');},created() {console.log('created');},beforeMount() {console.log('beforeMount');},mounted() {console.log('mounted');this.timer = setInterval(this.updateMessage, 5000);},beforeUpdate() {console.log('beforeUpdate');},updated() {console.log('updated');},beforeDestroy() {console.log('beforeDestroy');clearInterval(this.timer);},destroyed() {console.log('destroyed');}
};
</script>

五、Vue 3 中的生命周期变化

Vue 3 推荐使用 Composition API，你可以通过 onMounted、onUnmounted 等组合式函数来替代传统钩子。

import { onMounted, onUnmounted } from 'vue';setup() {onMounted(() => {console.log('Vue 3 mounted');});onUnmounted(() => {console.log('Vue 3 unmounted');});
}

六、总结：何时使用哪个生命周期？

生命周期钩子	推荐用途
`created`	请求数据、初始化变量
`mounted`	DOM 依赖操作、初始化第三方库如 ECharts 等
`beforeUpdate`	更新前快照、调试用途
`updated`	响应数据变化后的 DOM 操作
`beforeDestroy`	清理资源，如定时器、事件监听器
`destroyed`	数据销毁确认