uniappVue3中组件生命周期

一、什么是生命周期

        生命周期有多重叫法，有叫生命周期函数的，也有叫生命周期钩子的，还有钩子函数的，其实都是代表，在 Vue 实例创建、更新和销毁的不同阶段触发的一组钩子函数，这些生命周期函数允许开发者在不同阶段对 Vue 实例进行操作，以便执行特定的逻辑或清理工作。

        生命周期主要包含以下四个阶段:创建、挂载、更新、销毁。好比一款手机，创建(拿到全新一款手机)、挂载(安装各种软件)、更新(系统或者软件升级)、销毁(丢弃手机)

二、Vue3中的生命周期函数

setup()是在beforeCreate和created之前运行的,所以可以用setup代替这两个钩子函数。

onBeforeMount():已经完成了模板的编译,但是组件还未挂载到DOM上的函数。

onMounted():组件挂载到DOM完成后执行的函数。

onBeforeUpdate():组件更新之前执行的函数。

onUpdated():由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该函数。

onBeforeUnmount():在组件实例被卸载之前调用。

onUnmounted():组件卸载完成后执行的函数

onActivated():若组件实例是 缓存树的一部分,当组件被插入到DOM中时调用。

onDeactivated():若组件实例是 缓存树的一部分,当组件从DOM中被移除时调用。

onErrorCaptured():在捕获了后代组件传递的错误时调用。

官方地址

三、示例

        1.定义一个子组件当被卸载时输出“子组件被卸载了”

         2.在父类组件中定义一个计时器当达到条件后卸载子组件输出“子组件被卸载了”

        3、效果

        1.子组件被卸载前

        2.子组件被卸载后