融云IM干货丨uni-app 生命周期有哪些?

融云IM即时通讯
• 阅读 56

uni-app的生命周期分为应用生命周期、页面生命周期和组件生命周期三类:

应用生命周期

应用生命周期函数需要在App.vue中声明,主要包含以下函数:

  • onLaunch:当uni-app初始化完成时触发(全局只触发一次)。
  • onShow:当uni-app启动,或从后台进入前台显示时触发。
  • onHide:当uni-app从前台进入后台时触发。
  • onError:当uni-app报错时触发。
  • onPageNotFound:页面不存在监听函数。
  • onThemeChange:监听系统主题变化。
  • onUnhandledRejection:对未处理的Promise拒绝事件监听函数(2.8.1+ app-uvue暂不支持)。
  • onUniNViewMessage:对nvue页面发送的数据进行监听,可参考nvue向vue通讯(app-uvue不支持)。
  • onLastPageBackPress:最后一个页面按下Android back键,常用于自定义退出(app-uvue-android 3.9+)。
  • onExit:监听应用退出(app-uvue-android 3.9+)。

页面生命周期

页面生命周期函数主要包含以下函数:

  • onLoad:监听页面加载,其参数为上个页面传递的数据,参数类型为object(用于页面传参)。
  • onShow:监听页面显示。
  • onReady:监听页面初次渲染完成。
  • onHide:监听页面隐藏。
  • onUnload:页面卸载。
  • onPullDownRefresh:监听用户下拉动作。
  • onReachBottom:页面上拉触底事件的处理函数。
  • onShareAppMessage:用户点击右上角分享(微信小程序)。
  • onPageScroll:监听页面滚动。
  • onTabItemTap:当前是tab页时,点击tab时触发。
  • onResize:当窗口屏幕变化,横屏竖屏的时候。

组件生命周期

组件生命周期函数与Vue.js的标准生命周期相同,主要包含以下函数:

  • beforeCreate:在实例初始化之后被调用。
  • created:在实例创建完成后被立即调用。
  • beforeMount:在挂载开始之前被调用。
  • mounted:挂载到实例上去之后调用。
  • beforeUpdate:数据更新时调用,发生在虚拟DOM不定之前。
  • updated:由于数据更改导致虚拟DOM重新渲染和打补丁,在这时候会调用该钩子。
  • activated:keep-alive组件激活时调用。
  • deactivated:keep-alive组件停用时调用。
  • beforeDestroy:实例销毁之前调用。
  • destroyed:实例销毁后调用。

以上是uni-app中的主要生命周期函数,开发者可以根据需要在适当的生命周期钩子中执行特定的逻辑。

点赞
收藏
评论区
推荐文章
郜小超 郜小超
3年前
史上最全前端面试题(但是没有答案 自己百度 手动狗头!)
Vue面试题生命周期函数面试题1.什么是vue生命周期2.vue生命周期的作用是什么3.第一次页面加载会触发哪几个钩子4.简述每个周期具体适合哪些场景5.created和mounted的区别6.vue获取数据在哪个周期函数7.请详细说下你对vue生命周期的理解?vue路由面试题1.mvvm框架是什么?2.vuerout
Easter79 Easter79
3年前
vue 生命周期的理解(created && mouted的区别)
生命周期先上图(笑skr个人~~)!(https://oscimg.oschina.net/oscnet/6d899c3576884ee9db73c0263ac9f4027e0.png)什么是生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我
Easter79 Easter79
3年前
Vue 的生命周期之间到底做了什么事清?(源码详解)
前言相信大家对Vue有哪些生命周期早就已经烂熟于心,但是对于这些生命周期的前后分别做了哪些事情,可能还有些不熟悉。本篇文章就从一个完整的流程开始,详细讲解各个生命周期之间发生了什么事情。注意本文不涉及keepalive的场景和错误处理的场景。初始化流程newVue从newVue(opti
CuterCorley CuterCorley
3年前
uni-app入门教程(8)在uni-app中使用Vue
前言本文主要的主要内容是在uniapp中Vue的用法,具体如下:Vue支持响应式数据操作,可以实现数据和事件的绑定,同时支持this传递;uniapp在Vue实例生命周期的基础上增加了应用生命周期和页面生命周期;实现全局变量的3种方式,即公用模块、挂载Vue.prototype和globalData;Class和Style的动态绑定,包括对象
马丁路德 马丁路德
3年前
Vue和微信小程序的区别
_写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。_一、生命周期先贴两张图:vue生命周期小程序生命周期相比之下,小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。onLoad
御弟哥哥 御弟哥哥
3年前
重新认识Activity—Activity的生命周期
Activity的生命周期概念当用户浏览,退出和返回应用时,Activity实例会在其生命周期中转换为不同的状态。在生命周期回调方法中,可以声明用户离开并重新进入Activity时Activity的行为方式。每个回调允许执行适合于给定状态更改的特定工作。生命周期回调的良好实现可以帮助确保您的应用程序避免:如果用户在使用您的App时接到电话或切换
Stella981 Stella981
3年前
Flutter 中的组件绘制完成监听、组件生命周期和APP生命周期
Flutter的生命周期说到Flutter的生命周期,其实就是说StatefulWidget的生命周期,因为StatelessWidget是静态控件。StatefulWidget,通过借助于State对象,处理状态变化,并体现在UI上。这些阶段,就涵盖了一个组件从加载到卸载的全过程,即生命周期。
Stella981 Stella981
3年前
React Native 中组件的生命周期
概述就像Android开发中的View一样,ReactNative(RN)中的组件也有生命周期(Lifecycle)。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。RN组件的生命周期整理如下图:!33componentlifecycle(https://static.osch
Stella981 Stella981
3年前
Laravel的生命周期
Laravel的生命周期世间万物皆有生命周期,当我们使用任何工具时都需要理解它的工作原理,那么用起来就会得心应手,应用开发也是如此。理解了它的原理,那么使用起来就会游刃有余。在了解Laravel的生命周期前,我们先回顾一下PHP的生命周期。PHP的生命周期PHP的运行模
Stella981 Stella981
3年前
React生命周期
自从React发布Fiber之后,更新速度日新月异,而生命周期也随之改变,虽然原有的一些生命周期函数面临废弃,但理解其背后更新的机制也是一种学习在这里根据官方文档以及社区上其他优秀的文章进行一个对于生命周期的总结,大致上分为以下三个模块1.新老生命周期的区别2.为什么数据获取要在componentDidMount中进行3.
融云IM即时通讯
融云IM即时通讯
Lv1
北京云中融信网络科技有限公司(简称“融云”),是全球互联网通信云服务领创品牌。2014 年由创下亿级日活神话的“飞信”核心团队组建而成,依托沉淀近 20 年的领先技术基因,开创性地将通信技术封装为 SDK 提供给开发者和企业用户,大幅降低了行业对通信功能开发的难度和成本。 自成立以来,融云专注于向开发者和企业提供专业、简单、稳定的即时通讯和实时音视频 PaaS 服务。凭借产品、技术、服务等多方面优势,融云收获了超 80 万开发者和 2200+ 国家政府机关、企事业单位的青睐,支撑起 155 万+ 应用的通信需求,覆盖社交、娱乐、游戏、教育、电商、医疗等各行业场景,并打造出一系列中企出海最佳实践案例。 在全球范围内,融云构建了一张覆盖 245 个国家及地区的通信云网络,设立了多个海外数据中心以及数千加速节点,稳定互联,确保跨地域通信体验更加流畅。基于客户业务需求,融云可提供公有云、私有云、混合云等多种部署模式。 权威咨询机构“艾瑞咨询”数据报告显示,融云即时通讯云市场份额已连续多年稳居第一。
文章
181
粉丝
0
获赞
0