uniapp所有生命周期(超级详细)

本文详细解释了uniapp中的生命周期函数,包括应用生命周期函数如onLaunch、onShow等,以及页面生命周期函数如onLoad、onReady等,帮助开发者理解何时执行特定操作以管理应用和页面状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

什么是生命周期函数

生命周期函数:是由uniapp框架提供的内置函数,会伴随着生命周期,自动按次序执行。

生命周期函数的作用:允许程序员在特定的时间点,执行某些特定的操作,例如:页面刚加载的时候,可以在onLoad生命周期函数中初始化页面的数据。

注意:生命周期强调的是时间段,生命周期函数强调的是时间点。

在uniapp中,生命周期分为两类,分别是
  • 应用生命周期

    特指uniapp应用从启动->运行->销毁的过程。

  • 页面生命周期

    特指uniapp中,每个页面从加载->渲染->销毁的过程

应用生命周期函数

uniapp的应用生命周期函数需要在App.vue中声明

函数名说明
onLaunchuni-app 初始化完成时触发(全局只触发一次)
onShow当 uni-app 启动,或从后台进入前台显示
onHide当 uni-app 从前台进入后台
onError当 uni-app 报错时触发
onPageNotFound页面不存在监听函数
onThemeChange监听系统主题变化
export default {
 onLaunch: function() {
  console.log('App Launch')
 },
 onShow: function() {
  console.log('App Show')
 },
 onHide: function() {
   console.log('App Hide')
 }
}
页面声明周期函数
函数名说明
onLoad监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参)
onShow监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
onHide监听页面隐藏
onUnload监听页面卸载
onResize监听窗口尺寸变化
onPullDownRefresh监听用户下拉动作,一般用于下拉刷新,参考示例
onReachBottom页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项
onTabItemTap点击 tab 时触发,参数为Object,具体见下方注意事项
onShareAppMessage用户点击右上角分享
onPageScroll监听页面滚动,参数为Object
onNavigationBarButtonTap监听原生标题栏按钮点击事件,参数为Object
onBackPress监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:onBackPress 详解。支付宝小程序只有真机能触发,只能监听非navigateBack引起的返回,不可阻止默认行为。
onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件(pages.json 中的 searchInput 配置 disabled 为 true 时才会触发)
onShareTimeline监听用户点击右上角转发到朋友圈
onAddToFavorites监听用户点击右上角收藏
UniApp中,组件的生命周期钩子与Vue的生命周期钩子基本相同。UniApp兼容Vue2的composition-api,并提供了UniApp生命周期钩子。 以下是UniApp中常用的生命周期钩子函数: - beforeCreate: 在实例初始化之后被调用,此时数据观测、事件配置等尚未完成。 - created: 在实例创建完成后被立即调用,此时已经完成数据观测、属性和方法的运算,但尚未挂载到DOM上。 - beforeMount: 在挂载开始之前被调用,此时模板编译完成,但尚未挂载到DOM上。 - mounted: 挂载到实例上去之后调用,此时组件已经挂载到DOM上,并且可以进行DOM操作。 - beforeUpdate: 数据更新时调用,此时数据已经更新,但尚未更新DOM。 - updated: 数据更新之后时调用,此时数据已经更新并且DOM也已经重新渲染完成。 - beforeDestroy: 实例销毁之前调用,此时实例仍然完全可用,可以进行一些清理工作。 - destroyed: Vue实例销毁后调用,调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 通过这些生命周期钩子函数,你可以在不同的阶段执行相应的操作,例如初始化数据、发送网络请求、DOM操作等。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [uni-composition-api:兼容UniAppVue2中composition-api的使用,以及提供UniApp生命周期钩子](https://download.csdn.net/download/weixin_42099530/16036603)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [uni-app 生命周期](https://blog.csdn.net/YWW_ABC/article/details/121720505)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值