Vue3生命周期
原创
Vue 3 生命周期
Vue 3 的生命周期函数是在组件创建、更新和销毁的不同阶段执行的一系列钩子函数。这些生命周期函数提供了在组件不同阶段执行自定义逻辑的机会。
组件生命周期钩子函数
Vue 3 的组件生命周期钩子函数可以分为三个主要阶段：创建阶段、更新阶段和销毁阶段。下面是每个阶段的生命周期钩子函数：
创建阶段
beforeCreate：在实例创建之前调用。此时组件实例的响应式数据和事件还未初始化。created：在实例创建完成后调用。此时组件实例的响应式数据已经初始化，可以访问和操作数据。beforeMount：在组件挂载之前调用。此时组件的模板已经编译完成，但尚未挂载到 DOM 上。mounted：在组件挂载完成后调用。此时组件已经被挂载到 DOM 上，可以进行 DOM 操作和访问 DOM 元素。
更新阶段
beforeUpdate：在组件更新之前调用。当组件的响应式数据发生改变时，会触发更新。updated：在组件更新完成后调用。此时组件的 DOM 已经更新，可以进行一些更新后的操作。
销毁阶段
beforeUnmount：在组件卸载之前调用。此时组件仍然可以访问和操作数据。unmounted：在组件卸载完成后调用。此时组件已经从 DOM 中移除，不再可用。
示例
下面是一个简单的示例，演示了 Vue 3 生命周期的使用：
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update Message</button>
<button @click="destroyComponent">Destroy Component</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue 3!'
};
},
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
},
beforeUpdate() {
console.log('beforeUpdate');
},
updated() {
console.log('updated');
},
beforeUnmount() {
console.log('beforeUnmount');
},
unmounted() {
console.log('unmounted');
},
methods: {
updateMessage() {
this.message = 'Updated message';
},
destroyComponent() {
this.$destroy();
}
}
};
</script>在上面的示例中，我们定义了一个简单的组件，包含了各个生命周期钩子函数。当组件被创建、更新和销毁时，相应的钩子函数会被调用，并打印相应的信息到控制台。我们还定义了两个按钮，用于更新组件的数据和销毁组件。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
