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

前端流行框架Vue3教程：22. 组件生命周期

ai 2025/8/16 18:45:46

22. 组件生命周期

每个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码

/*** 组件的生命周期* 1. 创建阶段:beforeCreate,created* 2. 挂载阶段:beforeMount,mounted* 3. 更新阶段:beforeUpdate,updated* 4. 销毁阶段:beforeUnmount,unmounted*/

在 Vue 中，组件的生命周期是指从创建到销毁的整个过程。Vue 提供了多个钩子函数，允许我们在特定的阶段执行自定义逻辑。

生命周期阶段

Vue 组件的生命周期可以分为四个主要阶段：

1. 创建阶段

beforeCreate()：组件实例刚刚被创建，此时数据观测和事件配置尚未初始化。
created()：组件实例已经创建完成，数据观测、属性和事件方法已经配置好。

beforeCreate() {console.log('组件创建之前');
},
created() {console.log('组件创建完毕');
}

2. 挂载阶段

beforeMount()：模板编译/挂载之前，此时还没有渲染 DOM。
mounted()：模板渲染完成，此时可以访问 DOM 元素。

beforeMount() {console.log('组件挂载/渲染之前');
},
mounted() {console.log('组件挂载/渲染完毕');
}

3. 更新阶段

beforeUpdate()：组件更新之前，响应式数据发生变化但 DOM 还未更新。
updated()：组件更新完成后调用，此时 DOM 已经更新。

beforeUpdate() {console.log('组件更新之前');
},
updated() {console.log('组件更新完毕');
}

4. 销毁阶段

beforeUnmount()：组件销毁之前调用，此时组件仍然完全可用。
unmounted()：组件销毁完成后调用，此时所有指令已被解绑，子组件也已被销毁。

beforeUnmount() {console.log('组件销毁之前');
},
unmounted() {console.log('组件销毁完毕');
}

示例代码

以下是一个完整的示例，展示了如何在 App.vue 文件中使用这些生命周期钩子：

<script>
export default {beforeCreate() {console.log('组件创建之前');},created() {console.log('组件创建完毕');},beforeMount() {console.log('组件挂载/渲染之前');},mounted() {console.log('组件挂载/渲染完毕');},beforeUpdate() {console.log('组件更新之前');},updated() {console.log('组件更新完毕');},beforeUnmount() {console.log('组件销毁之前');},unmounted() {console.log('组件销毁完毕');}
};
</script><template><h3>组件的生命周期</h3>
</template>

在这里插入图片描述

我们可以看到，页面加载完毕后，执行到了渲染完毕mounted().

那我们加一些代码，让页面数据可以产生变化。

app.vue

<script>
export default {data() {return {messgae: '更新之前'}},methods: {updataHandle() {this.messgae = '更新之后'}},beforeCreate() {console.log('组件创建之前')},created() {console.log('组件创建完毕')},beforeMount() {console.log('组件挂载/渲染之前')},mounted() {console.log('组件挂载/渲染完毕')},beforeUpdate() {console.log('组件更新之前')},updated() {console.log('组件更新完毕')},beforeUnmount() {console.log('组件销毁之前')},unmounted() {console.log('组件销毁完毕')}
}</script><template><h3>组件的生命周期</h3><p>{{ messgae }}</p><button @click="updataHandle">更新</button>
</template>

在这里插入图片描述