uni-app 生命周期

小鱼儿 2023-07-24 02:59 1阅读 0赞

###  ###

*   *  应用生命周期（仅可在App.vue中监听）
     *  页面生命周期（在页面中添加）
     *  组件的生命周期（与vue标准组件的生命周期相同）

## 应用生命周期（仅可在App.vue中监听） ##

<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>onUniNViewMessage</td> 
   <td>对 nvue 页面发送的数据进行监听</td> 
  </tr> 
 </tbody> 
</table>

## 页面生命周期（在页面中添加） ##

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onLoad</td> 
   <td>监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）</td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面</td> 
  </tr> 
  <tr> 
   <td>onReady</td> 
   <td>监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>监听页面隐藏</td> 
  </tr> 
  <tr> 
   <td>onUnload</td> 
   <td>监听页面卸载</td> 
  </tr> 
  <tr> 
   <td>onResize</td> 
   <td>监听窗口尺寸变化</td> 
  </tr> 
  <tr> 
   <td>onPullDownRefresh</td> 
   <td>监听用户下拉动作，一般用于下拉刷新</td> 
  </tr> 
  <tr> 
   <td>onReachBottom</td> 
   <td>页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据</td> 
  </tr> 
  <tr> 
   <td>onTabItemTap</td> 
   <td>点击 tab 时触发</td> 
  </tr> 
  <tr> 
   <td>onShareAppMessage</td> 
   <td>用户点击右上角分享</td> 
  </tr> 
  <tr> 
   <td>onPageScroll</td> 
   <td>监听页面滚动</td> 
  </tr> 
 </tbody> 
</table>

当页面中需要用到下拉刷新功能时，打开pages.json，在"globalStyle"里设置"enablePullDownRefresh":true  
![在这里插入图片描述][20200409100422635.png]  
此时所有页面都可以完成下拉刷新功能  
如果想单个页面不能执行刷新功能：在pages.json里单个页面上添加  
![在这里插入图片描述][20200409100429737.png]  
onShareAppMessage 用户点击右上角分享，可在转发时设置转发标题，路径和图片  
![在这里插入图片描述][20200409100458482.png]

## 组件的生命周期（与vue标准组件的生命周期相同） ##

<table> 
 <thead> 
  <tr> 
   <th align="center">函数名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">beforeCreate</td> 
   <td>在实例初始化之后被调用</td> 
  </tr> 
  <tr> 
   <td align="center">created</td> 
   <td>在实例创建完成后被立即调用</td> 
  </tr> 
  <tr> 
   <td align="center">beforeMount</td> 
   <td>在挂载开始之前被调用</td> 
  </tr> 
  <tr> 
   <td align="center">mounted</td> 
   <td>挂载到实例上之后调用</td> 
  </tr> 
  <tr> 
   <td align="center">beforeUpdate</td> 
   <td>数据更新时调用，发生在虚拟 DOM 打补丁之前</td> 
  </tr> 
  <tr> 
   <td align="center">updated</td> 
   <td>由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子</td> 
  </tr> 
  <tr> 
   <td align="center">beforeDestroy</td> 
   <td>实例销毁之前调用。在这一步，实例仍然完全可用</td> 
  </tr> 
  <tr> 
   <td align="center">destroyed</td> 
   <td>Vue 实例销毁后调用</td> 
  </tr> 
 </tbody> 
</table>

[20200409100422635.png]: /images/20230528/c0ef1573a545471abc1a594ae6b19910.png
[20200409100429737.png]: /images/20230528/c97a67f7aa9f42a5940e7ef7e357cd66.png
[20200409100458482.png]: /images/20230528/52aa76aa26d84627a71cc1f4a8996b58.png