生命周期钩子（Lifecycle Hooks） Vue 3

最新推荐文章于 2024-04-16 14:30:21 发布

纸飞机的旅行

最新推荐文章于 2024-04-16 14:30:21 发布

阅读量281

点赞数

文章标签： vue.js javascript 前端

本文为博主原创文章，未经博主允许不得转载

本文链接：https://blog.csdn.net/weixin_44857463/article/details/132276935

版权

在Vue 3中，生命周期钩子（Lifecycle Hooks）是在组件的不同生命周期阶段触发的一组函数，允许您在特定的组件状态下执行代码。Vue 3中的生命周期钩子与Vue 2中的类似，但有一些不同之处。下面是Vue 3中的主要生命周期钩子及其解释：

setup: 这是Vue 3中引入的一个新的钩子，它在组件创建之前被调用。setup函数是组件的入口点，它可以执行一些设置工作，例如响应式数据的初始化、引入其他模块，以及设置监听器等。在setup函数中，可以通过返回一个对象来暴露一些变量、方法等，这些暴露出来的内容可以在组件模板中使用。
beforeCreate: 在组件实例被创建之前被调用。此时组件的属性和方法还没有被初始化。
created: 在组件实例被创建后立即调用。此时组件的属性和方法已经被初始化，但DOM尚未挂载。
beforeMount: 在组件被挂载到DOM之前被调用。此时组件的模板已经编译完成，但尚未插入到页面中。
mounted: 在组件被挂载到DOM后调用。此时组件的模板已经插入到页面中，可以进行DOM操作。
beforeUpdate: 在组件更新之前被调用，发生在数据变化导致DOM更新之前。
updated: 在组件更新之后被调用，发生在数据变化导致DOM更新之后。
beforeUnmount: 在组件实例销毁之前被调用。可以在这里进行一些清理工作，如取消订阅、清除定时器等。
unmounted: 在组件实例被销毁后调用。此时组件的所有内容都会被销毁，包括DOM元素和监听器。
errorCaptured: 当子组件发生错误时被调用。可以用来捕获和处理子组件中的错误。

需要注意的是，在Vue 3中，beforeDestroy 和 destroyed 这两个在Vue 2中存在的生命周期钩子已经被废弃，取而代之的是 beforeUnmount 和 unmounted。

需要注意的是，在使用Composition API时，setup 函数中可以直接使用许多生命周期钩子的功能，例如在 setup 中返回的 ref 或 reactive 数据会在组件的整个生命周期中自动更新。

总之，生命周期钩子允许在不同的组件生命周期阶段执行特定的操作，从而控制和管理组件的行为和状态。在编写Vue 3应用程序时，可以根据需要使用这些生命周期钩子来实现您的业务逻辑。

关注