Vue实例生命周期中的所有钩子函数

在 Vue 3 中,实例生命周期的钩子函数被整合为了两个主要的阶段:Composition API 阶段和 Options API 阶段。下面是 Vue 3 中的所有生命周期钩子函数:

Composition API 阶段

setup  //在组件实例创建之前执行,用于设置组件的初始状态和行为。它是 Composition API 的入口点。


Options API 阶段:

beforeCreate  //在实例被创建之前执行,此时数据和事件还未初始化。

created  //实例已经创建完成,数据和事件已初始化,但尚未挂载到 DOM。

beforeMount //在 DOM 挂载之前被调用。

mounted  //DOM 挂载完成后调用,此时组件已经显示在页面上。

beforeUpdate  //在数据更新之前调用,发生在虚拟 DOM 重新渲染和打补丁之前。

updated  //数据更新完成后调用,组件的数据和 DOM 都已更新。

beforeUnmount  //在实例销毁之前调用,此时组件还存在。

unmounted  //实例被销毁后调用,组件已被移出 DOM。

errorCaptured //捕获到子孙组件抛出的错误时调用。

每个钩子函数都有其特定的用途,你可以在相应的阶段执行一些逻辑,从而实现不同的功能。Composition API 阶段的 setup 钩子与 Options API 阶段的其他钩子是分离的,但你可以在 setup 钩子中访问 Options API 阶段的数据和方法。

需要注意的是,在 Vue 3 中,被认为是「已弃用」或「不推荐使用」的生命周期钩子函数有:beforeDestroy(使用 beforeUnmount 替代)、destroyed(使用 unmounted 替代)和 activateddeactivated。你应该尽量遵循官方文档的建议来使用适当的生命周期钩子函数。

你可能感兴趣的:(Vue系列,vue.js,前端,javascript,前端框架)