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) // 0
this.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); // undefined
console.log(' - message:', this.message); // undefined
console.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 的初始化操作
- DOM 操作分水岭：
-
beforeUpdate→updated- 避免修改数据：在钩子内修改数据可能导致无限循环更新
- 获取 DOM 状态：
beforeUpdate获取更新前 DOM，updated获取更新后 DOM
-
beforeDestroy→destroyed- 资源清理责任：Vue 不会自动清理全局资源（如定时器、事件监听）
- DOM 残留现象：Vue 只解除绑定，不删除 DOM 节点（页面效果可能保留但无响应）
🔍 常见问题
-
为什么在
created发起请求，不在mounted？created阶段更早，可更快获取数据（DOM无关操作尽量提前）
-
beforeDestroy不清理定时器会怎样？- 定时器持续运行，导致内存泄漏（即使组件销毁了，JS代码依然在后台执行）