Vue 组件生命周期函数解析
在 Vue 开发中,理解组件的生命周期至关重要。这些钩子函数允许我们在组件的不同阶段执行特定逻辑,比如初始化数据、操作 DOM 或清理资源。
核心阶段概览
一个组件从创建到销毁,主要经历四个阶段:创建期、渲染期、更新期和销毁期。每个阶段都有对应的钩子函数可供调用。
<template>
<div>
<h3>组件的生命周期函数演示</h3>
<p>{{ message }}</p>
<button @click="updateHandle">修改文本内容</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "组件原始数据"
};
},
methods: {
updateHandle() {
this.message = "修改完成后的文本信息";
}
},
// 创建期
beforeCreate() {
console.log("组件实例创建之前");
},
created() {
console.log("组件实例已创建");
},
// 渲染期
beforeMount() {
console.log("DOM 挂载之前");
},
mounted() {
console.log("DOM 挂载完成");
},
// 更新期
beforeUpdate() {
console.log("数据更新前");
},
updated() {
console.log("数据更新后");
},
// 销毁期
beforeUnmount() {
console.log("组件销毁前");
},
unmounted() {
console.log("组件已销毁");
}
};
</script>
运行时的行为观察
当你初次加载页面时,控制台会依次打印出'创建'和'挂载'相关的日志。这是因为此时组件完成了初始化并渲染到了页面上。
点击按钮触发数据变更时,你会注意到只有更新阶段的两个钩子被触发:beforeUpdate 和 updated。这符合预期——数据变了,但 DOM 还没重新渲染,所以先执行 beforeUpdate;等 DOM 更新完毕,再执行 updated。
这种机制让我们能精准控制何时读取最新数据,或者何时执行副作用操作(如发送请求、重置表单)。在实际项目中,created 常用于发起异步请求,而 mounted 则适合操作 DOM 元素。
注意事项
虽然代码示例使用了 Vue 2 的选项式 API,但在 Vue 3 的组合式 API 中,对应关系依然保持,只是写法有所不同。理解这些底层逻辑有助于你更好地调试组件状态问题。


