vue3框架中的生命周期

在 Vue 3 中,常用的生命周期函数有以下几个:

1.setup

setup 函数是 Vue 3 新增加的生命周期函数,在组件实例化之前被调用。它接收 props、context 和一个 reactive 的返回值,并且可以返回一个包含状态和事件处理程序的对象。

2.beforeCreate

在 Vue 3 中,beforeCreate 生命周期函数已经被废弃,取而代之的是使用 setup 函数。

3.created

在组件实例被创建之后立即调用。此时,组件还未被挂载到 DOM 中,因此无法访问到 $el 属性。一般情况下,在 created 钩子函数中进行数据初始化、异步请求数据等操作。

4.beforeMount

在组件挂载到 DOM 之前被调用。此时,模板编译完成并且可访问到 $el 属性,但尚未渲染到页面上。

5.mounted

在组件挂载到 DOM 之后被调用。此时,组件已经渲染到页面上并且可访问到 $el 属性。一般情况下,在 mounted 钩子函数中执行一些需要访问 DOM 元素的操作,如获取元素尺寸、给元素绑定事件等。

6.beforeUpdate

在组件更新之前被调用。此时,虚拟 DOM 已生成并准备渲染,但尚未开始重新渲染。

7.updated

在组件更新之后被调用。此时,组件已经重新渲染到页面上。一般情况下,在 updated 钩子函数中执行一些需要访问 DOM 元素的操作,如获取元素尺寸、给元素绑定事件等。

8.beforeUnmount

在组件卸载之前被调用。此时,组件实例仍然完全可用。

9.unmounted

在组件卸载之后被调用。此时,组件实例已经不存在了。在这个钩子函数中,可以进行一些清理工作,如取消定时器、销毁事件监听等。

除了以上这些常用的生命周期函数之外,Vue 3 还提供了一些其他的生命周期函数,如 errorCaptured、renderTracked、renderTriggered 等。

猜你喜欢

转载自blog.csdn.net/weixin_43534452/article/details/131591652