引入
首先在了解uni-app的生命周期，我们先来了解一下什么是生命周期和生命周期函数吧。
-
生命周期的概念：一个对象，从创建，运行到销毁的整个过程被称为生命周期。
-
生命周期函数的概念：在生命周期中的每一个阶段都会伴随着每一个函数的触发，这些函数被称为生命周期函数。
接下来让我们来了解一下uni-app的生命周期函数吧，uni-app的生命周期函数有两种，应用的生命周期函数和页面的生命周期函数。
应用的生命周期函数
我们先来了解一下应用的生命周期函数，uni-app支持的应用生命周期函数有四个，onLaunch ，onShow,onHide,onError。
- onLauch：当uni-app初始化完成的时候会触发一次（全局只一次噢）。
- onShow： 当uni-app启动，或从后台进入前台时它，它不像onLaunch只会在页面初始化完成时触发一次，它在页面显示时便会触发，是可以触发多次的。
- onHide：当uni-app从前台进入后台，其实就是从页面隐藏时会触发，也可以触发多次。
- onError：当uni-app报错，也就是应用出现异常时会触发。
应用的生命周期函数会定义在App.vue里面，让我们看看一看代码吧。
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
},
onError:function(err){
console.log(err.message)
}
}
</script>
页面的生命周期函数
接着我们来了解一下页面的生命周期函数吧，uni-app支持的页面的生命周期函数有五个，onLoad，onShow，onReady，onHide，onUnload。
- onLoad：监听页面加载，其页面为上个页面传递的参数，参数类型为Object，可以利用options传递参数，这个还是经常使用的。这个是不会多次触发的。
- onShow：监听页面的显示，页面每次出现在屏幕上都触发，包括从下级页面点返回，露出当前页面。会多次触发。
- onReady：监听页面初次渲染完成。所以不会多次触发噢。
- onHide：监听页面隐藏
- onUnload：监听页面卸载
看看相关代码吧
<script>
import test from '../../componments/test.vue'
import testA from '../../componments/a.vue'
import testB from '../../componments/b.vue'
export default {
data() {
return {
title: 'Hello',
num:0,
flag:false
}
},
components:{
test,
"test-a":testA,
"test-b":testB,
},
methods:{
checkTest(){
this.flag=!this.flag
},
getNum(num){
console.log(num)
}
},
onLoad(options) {
console.log('页面加载了',options)
},
onShow(){
console.log('页面显示了')
},
onReady(){
console.log('页面出次渲染完成了')
},
onHide(){
console.log('页面隐藏了')
}
}
</script>
