uni-app 应用生命周期、页面生命周期、组件生命周期的区别

亦凉 2022-10-18 11:23 359阅读 0赞

**页面加载过程：** 加载=》显示=》加载完成=》页面隐藏=》页面卸载

**触发页面生命周期：** onLoad:监听页面加载 =》 onShow:监听页面显示 =》 onReady:监听页面初次渲染完成 =》 onHide:监听页面隐藏 =》 onUnload:监听页面卸载

uni-app支持的[应用生命周期][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 函数名 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> onLaunch </td> 
 <td> 当uni-app 初始化完成时触发（全局只触发一次） </td> 
 </tr> 
 <tr> 
 <td> onShow </td> 
 <td> 当 uni-app 启动，或从后台进入前台显示 </td> 
 </tr> 
 <tr> 
 <td> onHide </td> 
 <td> 当 uni-app 从前台进入后台 </td> 
 </tr> 
 <tr> 
 <td> onError </td> 
 <td> 当 uni-app 报错时触发 </td> 
 </tr> 
 <tr> 
 <td> onUniNViewMessage </td> 
 <td> 对 nvue 页面发送的数据进行监听，可参考&nbsp;<a href="https://uniapp.dcloud.io/use-weex?id=nvue-%E5%90%91-vue-%E9%80%9A%E8%AE%AF" rel="nofollow">vue 向 vue 通讯</a> </td> 
 </tr> 
 <tr> 
 <td> onUnhandledRejection </td> 
 <td> 对未处理的 Promise 拒绝事件监听函数（2.8.1+） </td> 
 </tr> 
 <tr> 
 <td> onPageNotFound </td> 
 <td> 页面不存在监听函数 </td> 
 </tr> 
 <tr> 
 <td> onThemeChange </td> 
 <td> 监听系统主题变化 </td> 
 </tr> 
 </tbody> 
</table>

**注意：**

*  应用生命周期**仅可在App.vue中全局监听**，在其它页面监听无效。
 *  onlaunch里进行页面跳转，如遇白屏报错，[请参考][Link 2]

uni-app支持的页面生命周期函数

<table> 
 <tbody> 
 <tr> 
 <th> 函数名 </th> 
 <th> 说明 </th> 
 <th> 平台差异说明 </th> 
 </tr> 
 <tr> 
 <td> onLoad </td> 
 <td> 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），<a href="https://uniapp.dcloud.io/api/router?id=navigateto" rel="nofollow">参考示例</a> </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> onShow </td> 
 <td> 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> onReady </td> 
 <td> 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发 </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> onHide </td> 
 <td> 监听页面隐藏 </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> onUnload </td> 
 <td> 监听页面卸载 </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> onResize </td> 
 <td> 监听窗口尺寸变化 </td> 
 <td> 5+App、微信小程序 </td> 
 </tr> 
 <tr> 
 <td> onPullDownRefresh </td> 
 <td> 监听用户下拉动作，一般用于下拉刷新，<a href="https://uniapp.dcloud.io/api/ui/pulldown" rel="nofollow">参考示例</a> </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> onReachBottom </td> 
 <td> 页面上拉触底事件的处理函数 </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> onTabItemTap </td> 
 <td> 点击 tab 时触发，参数为Object </td> 
 <td> 微信小程序、百度小程序、H5、5+App（自定义组件模式） </td> 
 </tr> 
 <tr> 
 <td> onShareAppMessage </td> 
 <td> 用户点击右上角分享 </td> 
 <td> 微信小程序、百度小程序、头条小程序、支付宝小程序 </td> 
 </tr> 
 <tr> 
 <td> onPageScroll </td> 
 <td> 监听页面滚动，参数为Object </td> 
 <td> 5+ App、H5 </td> 
 </tr> 
 <tr> 
 <td> onNavigationBarButtonTap </td> 
 <td> 监听原生标题栏按钮点击事件，参数为Object </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> onBackPress </td> 
 <td> 监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解 </td> 
 <td> 5+ App、H5 </td> 
 </tr> 
 <tr> 
 <td> onNavigationBarSearchInputChanged </td> 
 <td> 监听原生标题栏搜索输入框输入内容变化事件 </td> 
 <td> 5+ App、H5 </td> 
 </tr> 
 <tr> 
 <td> onNavigationBarSearchInputConfirmed </td> 
 <td> 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。 </td> 
 <td> 5+ App、H5 </td> 
 </tr> 
 <tr> 
 <td> onNavigationBarSearchInputClicked </td> 
 <td> 监听原生标题栏搜索输入框点击事件 </td> 
 <td> 5+ App、H5 </td> 
 </tr> 
 </tbody> 
</table>

**注意：**

*  页面生命周期仅在page页面有效，而单独封装的组件中【页面周期无效】，但是Vue
 *  的生命周期依然有效 【Vue的生命周期在任何地方都是有效的】
 *  推荐使用uni-app里面的onReady 代替 vue 里面的 mounted
 *  推荐使用uni-app里面的onLoad 代替 vue 里面的 created

uni-app组件生命周期函数

到此 uni-app 应用生命周期、页面生命周期、组件生命周期的区别介绍完成。

[Link 1]: https://uniapp.dcloud.io/frame?id=%E5%BA%94%E7%94%A8%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
[Link 2]: https://ask.dcloud.net.cn/article/35942