应用生命周期、页面生命周期、组件生命周期

一 应用生命周期

函数名	说明	应用场景
onLaunch	当 uni-app 应用初始化完成时触发，全局只触发一次	一般用于查看用户是否授权、获取用户的设备信息等
onShow	当应用启动，或从后台进入前台显示时触发，可以触发多次	一般用于重新进入应用的消息提示或者数据刷新
onHide	监听应用从前台进入后台	一般用于退出应用时的消息提示
onError	应用报错时被触发	用于监测并处理错误

前台、后台定义：

当我们离开应用时，应用不会被直接销毁，而是进入了后台。当我们再次进入到应用时，应用就会从后台进入前台。

那应用什么时候会被真正销毁呢？

当应用进入后台超过一定时间，或者系统资源占用过高，应用才会被真正的销毁。再次打开就需要重新初始化启动应用。

二 页面生命周期

函数名	说明	支持平台
onLoad	页面加载时触发，一个页面只会调用一次。可以传递参数	所有
onShow	页面显示时触发，每次打开页面都会调用一次	所有
onReady	页面初次渲染完成后触发，一个页面只会调用一次	所有
onHide	页面隐藏时触发，每次隐藏页面都会被触发	所有
onUnload	页面卸载时触发	所有
onResize	页面每次窗口尺寸变化时会被触发	App、微信小程序
onPullDownRefresh	用户下拉页面时触发，一般用于页面下拉刷新	所有
onReachBottom	页面上拉滚动触底时触发	所有
onTabItemTap	点击底部 tab 栏时触发，参数为 Object	微信小程序、百度小程序、H5、App
onShareAppMessage	点击右上角分享时触发	微信小程序、百度小程序、字节跳动小程序、支付宝小程序
onPageScroll	页面滚动时触发，只监听页面垂直滚动	所有
onNavigationBarButtonTap	监听原生标题栏按钮点击事件	App、H5
onBackPress	页面返回时触发	App、H5
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件	App、H5
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	App、H5

说明

1 onLoad 参数说明

页面生命周期函数 onLoad，是页面最先执行的生命周期函数，如果从上个页面跳转到本页面，可以通过参数option 传递上个页面的数据。

//index.vue
//跳转语句，并在跳转链接上面加上要传递的数据
uni.reLaunch({
    url: 'test?name=我是首页的数据'
});

//me.vue
export default {
    //options参数就是上个页面传递过来的数据
    onLoad: function (options) {
        console.log(options.name);
    }
}

//打印出来的结果
我是首页的数据

2 onPullDownRefresh 函数 用于监听该页面用户下拉页面的动作。

普通页面下拉不会触发 onPullDownRefresh 函数，要先在 pages.json 里面，找到当前页面的 pages 节点，并在style 选项中将 enablePullDownRefresh 设置为 true，下拉页面才可以触发 onPullDownRefresh 函数。
调用完成 onPullDownRefresh 函数后，用 stopPullDownRefresh 函数可以停止当前页面的下拉状态。

//pages.json
{
    "path": "pages/index/index.vue",
    "style": {
        "enablePullDownRefresh": true
    }
}

//页面，隐藏下拉状态
export default{
    onPullDownRefresh(){
        console.log('用户下拉页面时触发')
        uni.stopPullDownRefresh()
    }
}

3 onTabItemTap 参数说明

属性	类型	说明
index	String	被点击 tabItem 的序号，从 0 开始
pagePath	String	被点击 tabItem 的页面路径
text	String	被点击 tabItem 的按钮文字

export default {
    onTabItemTap(options) {
        console.log('被点击tabItem的序号index:' + options.index)
        console.log('被点击tabItem的页面路径pagePath:' + options.pagePath)
        console.log('被点击tabItem的按钮文字text:' + options.text)
    }
}

注意以下几点：

onTabItemTap 常用于点击当前 tabitem，滚动或刷新当前页面。如果是点击不同的 tabitem，一定会触发页面切换。
如果想在 App 端实现点击某个 tabitem 不跳转页面，不能使用 onTabItemTap，可以使用plus.nativeObj.view 放一个区块盖住原先的 tabitem，并拦截点击事件。 在 App 端，从 HBuilderX 1.9 的自定义组件编译模式才开始支持 onTabItemTap。

4 onNavigationBarButtonTap 参数说明

属性	类型	说明
index	Number	原生标题栏按钮数组的下标

export default {
    onNavigationBarButtonTap(options) {
        console.log('index:' + options.index)
    }
}

5 onBackPress 参数说明

返回结果的格式是这样的：event = {from:backbutton、 navigateBack}。
其中 backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack 表示来源是 uni.navigateBack。

export default {
    onBackPress(options) {
        console.log('from:' + options.from)
    }
}

三 组件生命周期

函数名	应用
beforeCreate	实例初始化之后调用
created	实例创建完成后调用
beforeMount	模板编译之前调用
mounted	模板编译完成调用
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
beforeDestroy	实例销毁之前调用
destroyed	实例销毁后调用

四 页面生命周期和组件生命周期的执行顺序

页面生命周期函数 onLoad：页面加载
页面生命周期函数 onShow：页面显示
beforeCreate：实例初始化
created：实例创建完成
beforeMount：模板编译之前
mounted：模板编译完成
页面生命周期函数 onReady：页面初次显示

页面生命周期函数 onLoad、onShow 会先运行，接着 Login 组件中的 beforeCreate、created
等组件生命周期函数开始运行。组件加载完成后，页面生命周期函数 onReady 开始运行。

页面生命周期函数 onLoad、onShow 会先运行，接着组件中的 beforeCreate、created 等组件生命周期函数开始运行。组件加载完成后，页面生命周期函数 onReady 开始运行。

像这样比较重复的生命周期函数，我们推荐使用页面生命周期函数，比如：
组件生命周期函数 created 可以替换为页面生命周期中的 onLoad；
组件生命周期函数 mouted 可以替换为页面生命周期中的 onReady。