uniapp中的生命周期

uniapp是一个跨平台开发框架,其生命周期类似于Web应用程序的生命周期,分为App生命周期、页面生命周期和组件生命周期

一、App生命周期

App生命周期是指在用户打开或关闭UniApp应用时整个应用程序的生命周期,其包括以下几个阶段:

  1. onLaunch:当应用程序启动时该函数被调用,UniApp应用的全局变量和全局事件可以在该函数中初始化;
  2. onShow:当应用程序从后台切换到前台时该函数被调用,开发者可以在该函数中处理应用程序切换到前台后的一些操作,比如获取数据、刷新页面等;
  3. onHide:当应用程序从前台切换到后台时该函数被调用,开发者可以在该函数中处理应用程序切换到后台后的一些操作,比如停止播放音乐、释放资源等;
  4. onError:当应用程序发生错误时该函数被调用,开发者可以在该函数中处理错误信息,并在应用程序崩溃前做一些资源释放或其他清理操作;
  5. onUniNViewMessage:当应用程序收到uni-app页面(包括h5和小程序端)发来的消息时,该函数会被调用,开发者可以在该函数中处理uni-app页面传来的消息。

二、页面生命周期

页面生命周期是指UniApp应用中单个页面的生命周期,其包括以下几个阶段:

  1. onLoad:当页面加载时该函数被调用,开发者可以在该函数中请求数据并刷新页面;
  2. onShow:当页面展示时该函数被调用,开发者可以在该函数中更新数据和页面状态;
  3. onHide:当页面被隐藏时该函数被调用,开发者可以在该函数中停止播放音乐、释放资源等;
  4. onUnload:当页面卸载时该函数被调用,开发者可以在该函数中释放页面占用的资源;
  5. onPullDownRefresh:当页面下拉时该函数被调用,开发者可以在该函数中处理下拉刷新事件;
  6. onReachBottom:当页面滚动到底部时该函数被调用,开发者可以在该函数中处理加载更多事件;
  7. onShareAppMessage:当页面被分享时该函数被调用,开发者可以在该函数中配置分享信息;
  8. onPageScroll:当页面滚动时该函数被调用,开发者可以在该函数中处理页面滚动事件。

三、组件生命周期

组件生命周期是指UniApp应用中组件的生命周期,其包括以下几个阶段:

  1. created:当组件实例被创建时该函数被调用;
  2. attached:当组件被添加到页面节点树中时该函数被调用;
  3. ready:当组件渲染完毕并且可以和页面交互时该函数被调用;
  4. moved:当组件被移动到新的位置时该函数被调用;
  5. detached:当组件被从页面节点树中移除时该函数被调用。

注意

划重点了: 组件中是没有页面的生命周期的
比如这样一个场景,在你写好一个页面A之后,发现这个A页面是其他页面B的一部分,这时你需要将最开始写的这个A页面抽离成一个组件。然后将这个组件A以子组件的形式引入到B中。
这时要注意的是,你以前在页面中onShow,onLoad的写的代码是不会被调用的,原因就是组件中是没有页面的生命周期的
解决: 可以将以前onShow,onLoad中的代码放到mounted或者created中。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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:兼容UniAppVue2composition-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 ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值