Vue2 生命周期

文章目录

前言
🔄 Vue2 生命周期流程（8个核心钩子）
📝 代码中典型用法示例
一、您的描述验证
二、完整生命周期代码示例
三、关键阶段行为说明
🔍 常见问题

前言

提示：以下是本篇文章正文内容，下面案例可供参考

Vue2 生命周期钩子函数的正确名称、顺序及核心作用：

🔄 Vue2 生命周期流程（8个核心钩子）

阶段	钩子函数	正确拼写	触发时机
创建阶段	1. 创建前	`beforeCreate`	实例初始化后，数据观测/事件配置前（无法访问 `data` 和 `methods`）
	2. 创建后	`created`	实例创建完成，可访问数据/方法（未挂载DOM，适合API请求）
挂载阶段	3. 挂载前	`beforeMount`	模板编译完成，DOM未挂载到页面（无法操作真实DOM）
	4. 挂载后	`mounted`	DOM已挂载，可操作真实DOM元素（适合初始化第三方库）
更新阶段	5. 更新前	`beforeUpdate`	数据变化后，DOM重新渲染前（可获取更新前的DOM状态）
	6. 更新后	`updated`	DOM重新渲染完成（避免在此处修改数据，可能导致循环更新）
销毁阶段	7. 销毁前	`beforeDestroy`	实例销毁前触发（必须在此清理定时器、解绑全局事件）
	8. 销毁后	`destroyed`	实例完全销毁，所有绑定被移除（子组件也被销毁）

📝 代码中典型用法示例

export default {data() {return { count: 0 }},beforeCreate() {console.log('1. 数据未初始化:', this.count) // undefined},created() {console.log('2. 数据已初始化:', this.count) // 0this.fetchData() // 发起异步请求},mounted() {console.log('4. DOM已就绪:', document.getElementById('app'))this.initChart() // 初始化Echarts等DOM库},beforeDestroy() {clearInterval(this.timer) // 清理定时器window.removeEventListener('resize', this.handleResize) // 解绑事件}
}

一、您的描述验证

beforeCreate 阶段不能访问 data/methods，此时实例未初始化数据观测
created 是最早能访问数据的阶段，适合异步请求、非 DOM 操作
beforeMount 阶段无法操作 DOM，模板已编译但未挂载到页面
beforeDestroy 可最后一次操作数据，必须在此清理全局资源（定时器、事件监听）
destroyed 后实例效果残留但不可维护，Vue 会解除数据绑定和事件监听，但不会删除 DOM 节点

销毁阶段：beforeDestroy（销毁前）→ destroyed（销毁后）
更新阶段：仅当数据变化且影响DOM时触发（无数据变化不会执行）

二、完整生命周期代码示例

<!DOCTYPE html>
<html>
<head><title>Vue2 生命周期详解</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body><div id="app"><h1>{{ message }}</h1><button @click="updateMessage">更新数据</button><button @click="destroyInstance">销毁实例</button></div><script>new Vue({el: '#app',data() {return {message: 'Hello Vue!',timer: null,domElement: null}},// ------------------------- 创建阶段 -------------------------beforeCreate() {console.log('1. beforeCreate —— 实例初始化，但数据未观测:');console.log('   - data:', this.$data);          // undefinedconsole.log('   - message:', this.message);     // undefinedconsole.log('   - method:', typeof this.updateMessage); // undefined},created() {console.log('\n2. created —— 实例创建完成，可访问数据和方法:');console.log('   - message:', this.message);      // "Hello Vue!"console.log('   - 调用方法:', this.updateMessage); // function// 典型场景：发起异步请求this.fetchData();// 设置定时器（需在销毁前清理）this.timer = setInterval(() => {console.log('定时器运行中...');}, 1000);},// ------------------------- 挂载阶段 -------------------------beforeMount() {console.log('\n3. beforeMount —— 模板编译完成，但未挂载到DOM:');console.log('   - h1元素:', document.querySelector('h1')); // null},mounted() {console.log('\n4. mounted —— DOM已挂载，可操作真实DOM:');this.domElement = document.querySelector('h1');console.log('   - h1内容:', this.domElement.innerHTML); // "Hello Vue!"// 典型场景：初始化第三方库（如ECharts）this.initThirdPartyLibrary();},// ------------------------- 更新阶段 -------------------------beforeUpdate() {console.log('\n5. beforeUpdate —— 数据已变，DOM未更新:');console.log('   - 新数据:', this.message);console.log('   - DOM内容:', this.domElement.innerHTML); // 旧值},updated() {console.log('\n6. updated —— DOM已更新:');console.log('   - DOM内容:', this.domElement.innerHTML); // 新值},// ------------------------- 销毁阶段 -------------------------beforeDestroy() {console.log('\n7. beforeDestroy —— 实例销毁前，仍可操作数据:');console.log('   - message:', this.message); // 最新值// 必须清理资源！clearInterval(this.timer);console.log('已清理定时器');},destroyed() {console.log('\n8. destroyed —— 实例已销毁:');// 以下操作不会生效！this.message = '试图修改已销毁实例的数据';console.log('   - 数据修改无效:', this.message);},methods: {updateMessage() {this.message = 'Updated at: ' + new Date().toLocaleTimeString();},destroyInstance() {this.$destroy();},fetchData() {// 模拟API请求setTimeout(() => {this.message = 'Data loaded!';}, 1500);},initThirdPartyLibrary() {// 假设初始化图表console.log('初始化第三方库完成');}}});</script>
</body>
</html>

在这里插入图片描述

三、关键阶段行为说明

beforeCreate → created
- 数据观测建立：从无法访问数据 → 可自由操作数据方法
- 异步请求时机：在 created 发起可更快获取数据（相比 mounted 提前约一个生命周期）
beforeMount → mounted
- DOM 操作分水岭：mounted 是操作真实 DOM 的最早时机
- 第三方库初始化：如 ECharts、地图库等依赖 DOM 的初始化操作
beforeUpdate → updated
- 避免修改数据：在钩子内修改数据可能导致无限循环更新
- 获取 DOM 状态：beforeUpdate 获取更新前 DOM，updated 获取更新后 DOM
beforeDestroy → destroyed
- 资源清理责任：Vue 不会自动清理全局资源（如定时器、事件监听）
- DOM 残留现象：Vue 只解除绑定，不删除 DOM 节点（页面效果可能保留但无响应）