uniappVue3版本中组件生命周期和页面生命周期的详细介绍

301 阅读2分钟

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

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

二、Vue3中的生命周期函数

setup()是在beforeCreate和created之前运行的,所以可以用setup代替这两个钩子函数。 onBeforeMount() : 已经完成了模板的编译,但是组件还未挂载到DOM上的函数。 onMounted() : 组件挂载到DOM完成后执行的函数。 onBeforeUpdate(): 组件更新之前执行的函数。 onUpdated(): 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该函数。 onBeforeUnmount(): 在组件实例被卸载之前调用。 onUnmounted(): 组件卸载完成后执行的函数 onActivated(): 若组件实例是 缓存树的一部分,当组件被插入到 DOM 中时调用。 onDeactivated(): 若组件实例是 缓存树的一部分,当组件从 DOM 中被移除时调用。 onErrorCaptured(): 在捕获了后代组件传递的错误时调用。 注意:在uniapp组件中,onBeforeUpdate、onUpdated、onActivated、onDeactivated,H5支持,小程序无法使用。

uniapp中的页面生命周期函数

onLoad:页面加载时触发,可以在此生命周期函数中进行页面初始化操作。 onShow:页面显示时触发,可以在此生命周期函数中进行页面展示相关的操作。 onReady:页面初次渲染完成时触发,可以在此生命周期函数中进行页面渲染完成后的操作。 onHide:页面隐藏时触发,可以在此生命周期函数中进行页面隐藏相关的操作。 onUnload:页面卸载时触发,可以在此生命周期函数中进行页面卸载相关的操作。