在 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 等。