uni-app的常见生命周期

青旅半醒 2022-12-23 13:27 10阅读 0赞

## uni-app生命周期 ##

#### 应用的周期函数 ####

`onLaunch`初始化完成时触发（全局只触发一次）  
`onShow` 启动时，或从后台进入前台是显示  
`onHide`从前台进入后台  
`onError`报错时触发

#### 页面的周期函数 ####

`onLoad`监听页面加载，参数为上个页面传递的参数，参数类型为对象（触发一次）  
`onShow`监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回，返回到当前页面  
`onReady`监听页面初次渲染完成（触发一次）  
`onHide`监听页面隐藏  
`onUnload`监听页面卸载  
`onResize`监听窗口尺寸变化  
`onPullDownRefresh`监听用户下拉动作，一般用户下拉刷新，与onLoad生命周期函数同级

*  第一种方式 在pages.json页面下配置路由`"style":{"enablePullDownRefresh":true}`

//在下拉刷新过后启用勾子函数
    onPullDownRefresh(){ 
    	//逻辑代码
    	setTimeout(()=>{  //由于有的文件太小刷新立马就好了，所以做了计时器来看效果，实际开发看要求
    		//逻辑代码
    		uni.stopPullDownRefresh()  //延时2s刷新页面并关闭
    	},2000)
    }

*  第二种方式  
    调用uni.startPullDownRefresh() 这个方法

> 比如说点击按钮实现刷新

methods:{ 
    	pullDown(){       //在按钮上定义的事件方法
    		uni.startPullDownRefresh()
    	}
    }

`onReachBottom`页面滚动到底部的事件，常用于下拉下一页的数据，也就是数据太多页面需要下拉的时候，到达触底的时候触发，可以设置距离触底的距离，默认是50rpx，可以在pages.json里面设置`"onReachBottomDistance"：200`

`onTabItemTap`点击tab时触发  
`onShareAppMessage`点击右上角的分享

#### 组件生命周期函数跟vue周期函数一致 ####

4个步骤8个状态  
beforeCreate 初始化之前 `几乎没有东西可以操作，数据还是undefined`  
created 初始化之后 `除了dom，数据在此时已经有了，常用于数据初始化`  
beforeMount 挂载之前 `除了dom，数据在此时已经有了`  
mounted 挂载之后 `此时页面所有东西都可以操作了`  
beforeUpdate 改变之前 `之后全部都可以操作` 仅支持H5  
updated 改变之后 仅支持H5  
beforeDistory 销毁之前  
distoryed 销毁之后  
nextTick（） 在合适的地方去调用，这个面试比较爱问，此时面试官已经在挖坑  
我认为这篇的 [nextTick][] 还行

> 写的很大概，详情去找官方文档

[nextTick]: https://blog.csdn.net/qq_35432904/article/details/91591196