uni-app 应用生命周期和页面生命周期的区别

柔光的暖阳◎ 2023-05-29 02:58 49阅读 0赞

### nui-app 页面渲染及触发的页面生命周期 ###

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

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

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

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <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 页面发送的数据进行监听，可参考 <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> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>说明</th> 
   <th>平台差异说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onLoad</td> 
   <td>监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），<a href="https://uniapp.dcloud.io/api/router?id=navigateto" rel="nofollow">参考示例</a></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onReady</td> 
   <td>监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>监听页面隐藏</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onUnload</td> 
   <td>监听页面卸载</td> 
   <td></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></td> 
  </tr> 
  <tr> 
   <td>onReachBottom</td> 
   <td>页面上拉触底事件的处理函数</td> 
   <td></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></td> 
  </tr> 
  <tr> 
   <td>onBackPress</td> 
   <td>监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：<a href="https://ask.dcloud.net.cn/article/35120" rel="nofollow">onBackPress 详解</a></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

### vue[生命周期函数][Link 3] ###

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeCreate</td> 
   <td>初始化时间之后，实例被创建之前执行代码</td> 
  </tr> 
  <tr> 
   <td>created</td> 
   <td>用来在一个实例被创建之后执行代码</td> 
  </tr> 
  <tr> 
   <td>beforeMound</td> 
   <td>实例被挂载之前执行的代码</td> 
  </tr> 
  <tr> 
   <td>mounted</td> 
   <td>实例被挂载完成后执行的代码</td> 
  </tr> 
  <tr> 
   <td>beforeUpdate</td> 
   <td>当data数据被修改时，DOM重新渲染并更新应用之前执行代码</td> 
  </tr> 
  <tr> 
   <td>updated</td> 
   <td>当data数据被修改时，DOM重新渲染并更新应用后执行代码</td> 
  </tr> 
  <tr> 
   <td>beforeDestroy</td> 
   <td>在解除绑定销毁子组件以及事件监听器之前执行代码</td> 
  </tr> 
  <tr> 
   <td>destroyed</td> 
   <td>在解除绑定销毁子组件以及事件监听器后执行代码</td> 
  </tr> 
 </tbody> 
</table>

*注意：*

*  mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
 *  不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

### uni-app组件生命周期函数 ###

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>说明</th> 
   <th>平台差异说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeCreate</td> 
   <td>在实例初始化之后被调用</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>created</td> 
   <td>在实例创建完成后被立即调用。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>beforeMount</td> 
   <td>在挂载开始之前被调用。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>mounted</td> 
   <td>挂载到实例上去之后调用。注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>beforeUpdate</td> 
   <td>数据更新时调用，发生在虚拟 DOM 打补丁之前</td> 
   <td>仅H5平台支持</td> 
  </tr> 
  <tr> 
   <td>updated</td> 
   <td>由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。</td> 
   <td>仅H5平台支持</td> 
  </tr> 
  <tr> 
   <td>beforeDestroy</td> 
   <td>实例销毁之前调用。在这一步，实例仍然完全可用</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>destroyed</td> 
   <td>Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

[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
[Link 3]: https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90