生命周期钩子解析
🎯 引言
学会 Vue2 生命周期钩子，你就能更好地掌控组件的创建、更新和销毁过程，解决实际开发中的数据处理、状态管理和性能优化问题。本文将带你一步步认识和应用这些关键钩子，让你写出更加健壮和灵活的 Vue 组件。
⚙️ Vue2 生命周期概述
Vue2 的生命周期就是指从组件实例创建到销毁这一过程中的一系列阶段。每个阶段 Vue 都会自动调用一些“钩子函数”，供我们在特定时机执行代码。理解这些钩子，能帮助我们更合理地安排业务逻辑。
Vue2 生命周期大致可以分为以下几个阶段：
- 创建阶段（beforeCreate、created）
- 挂载阶段（beforeMount、mounted）
- 更新阶段（beforeUpdate、updated）
- 销毁阶段（beforeDestroy、destroyed）
接下来我们逐个来看。
🛠️ 创建阶段钩子
beforeCreate
组件实例刚刚被创建，数据观测（data 和 methods 等）尚未初始化，不能访问 data、computed、methods。
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue2!',
};
},
beforeCreate() {
// 这里访问 this.message 是 undefined
console.log('beforeCreate：', this.message); // undefined
},
};
</script>
created
组件实例已创建，数据已被观测，可以访问 data、computed、methods，但 DOM 还未挂载。
<script>
export default {
data() {
return {
message: 'Hello Vue2!',
};
},
created() {
console.log('created：', this.message); // 正常输出 "Hello Vue2!"
// 可以在这里发起数据请求或初始化业务逻辑
},
};
</script>
🚀 挂载阶段钩子
beforeMount
模板编译完成，虚拟 DOM 已生成，但还未挂载到真实 DOM。
<script>
export default {
beforeMount() {
console.log('beforeMount：即将挂载到页面');
},
};
</script>
mounted
组件挂载到页面后调用，此时可以操作真实 DOM。
<template>
<div ref="myDiv">这是一个 div</div>
</template>
<script>
export default {
mounted() {
console.log('mounted：组件挂载完成');
// 这里可以访问真实 DOM
this.$refs.myDiv.style.color = 'blue';
},
};
</script>
🔄 更新阶段钩子
当组件的数据变化，触发重新渲染，生命周期进入更新阶段。
beforeUpdate
数据更新，虚拟 DOM 重新渲染前调用。
<script>
export default {
data() {
return {
count: 0,
};
},
beforeUpdate() {
console.log('beforeUpdate：数据即将更新，当前 count 是', this.count);
},
};
</script>
updated
组件 DOM 更新完成后调用。
<script>
export default {
updated() {
console.log('updated：DOM 更新完毕');
},
};
</script>
🧹 销毁阶段钩子
当组件不再需要，Vue 会销毁组件实例，释放资源。
beforeDestroy
组件销毁前调用，可以做一些清理工作。
<script>
export default {
beforeDestroy() {
console.log('beforeDestroy：组件即将被销毁');
// 清除定时器、取消事件监听等
},
};
</script>
destroyed
组件销毁后调用，所有的事件监听和子实例都被移除。
<script>
export default {
destroyed() {
console.log('destroyed：组件已销毁');
},
};
</script>
🔍 生命周期钩子实战示例
我们做一个简单的倒计时组件，演示生命周期钩子配合使用。
<template>
<div>
<p>倒计时：{{ seconds }} 秒</p>
<button @click="start">开始倒计时</button>
</div>
</template>
<script>
export default {
data() {
return {
seconds: 10,
timer: null,
};
},
beforeCreate() {
console.log('beforeCreate：倒计时组件初始化');
},
created() {
console.log('created：倒计时数据准备完成');
},
mounted() {
console.log('mounted：组件已挂载');
},
beforeUpdate() {
console.log('beforeUpdate：秒数即将更新，当前秒数', this.seconds);
},
updated() {
console.log('updated：秒数更新完毕', this.seconds);
},
beforeDestroy() {
console.log('beforeDestroy：倒计时组件即将销毁，清除定时器');
clearInterval(this.timer);
},
destroyed() {
console.log('destroyed：倒计时组件销毁完成');
},
methods: {
start() {
this.timer = setInterval(() => {
if (this.seconds > 0) {
this.seconds--;
} else {
clearInterval(this.timer);
}
}, 1000);
},
},
};
</script>
🧾 小节总结
- Vue2 生命周期钩子分为创建、挂载、更新、销毁四大阶段，帮助开发者在不同阶段执行代码。
- created 和 mounted 是最常用的钩子，分别用于数据准备和 DOM 操作。
- 更新钩子 beforeUpdate 和 updated 适合监听数据变更，但注意性能影响。
- 销毁钩子 beforeDestroy 和 destroyed 用于清理资源，避免内存泄漏。
❓ 知识问答（Q&A）
Q：为什么不能在 beforeCreate 钩子中访问 data？
A：因为 beforeCreate 阶段数据还未被初始化和观测，所以 data 里面的值暂时不可用。
Q：mounted 和 created 钩子有什么区别？
A：created 钩子是在数据准备好但还未挂载 DOM 阶段，mounted 是组件挂载到真实 DOM 后调用，可以操作页面元素。
Q：如何防止组件销毁时内存泄漏？
A：在 beforeDestroy 钩子中清理定时器、取消事件监听和释放资源，确保组件干净销毁。
🧪 小练习
练习1
写一个简单的 Vue2 计数器组件，利用 mounted 钩子自动初始化计数值，并用 beforeDestroy 清除定时器。
<template>
<div>
<p>计数器：{{ count }}</p>
<button @click="increment">加一</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
timer: null,
};
},
mounted() {
// 初始化计数器为 5
},
beforeDestroy() {
// 清除定时器
},
methods: {
increment() {
this.count++;
},
},
};
</script>
练习2
实现一个监听数据变化的组件，使用 beforeUpdate 和 updated 打印 count 变化过程。
<template>
<div>
<p>点击次数：{{ count }}</p>
<button @click="count++">点击增加</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
beforeUpdate() {
// 打印更新前 count 值
},
updated() {
// 打印更新后 count 值
},
};
</script>
🎉 恭喜你已经掌握 Vue2 生命周期钩子、数据绑定与组件销毁清理技能啦！继续多练习，写出高质量的 Vue2 应用吧！