06 【uniapp生命周期】

生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。

生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数。

1.应用生命周期

uni-app 支持如下应用生命周期函数：

函数名	说明
onLaunch	当`uni-app` 初始化完成时触发（全局只触发一次）
onShow	当 `uni-app` 启动，或从后台进入前台显示
onHide	当 `uni-app` 从前台进入后台
onError	当 `uni-app` 报错时触发

示例代码

<script>
	// 只能在App.vue里监听应用的生命周期
	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('App Err', err)
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

代码分析：

第一次加载页面时会调用onLaunch ，onShow 打印App Launch，App Show
当你在浏览器离开页面，去查看其它页面，或者其它应用会触发onHide，在回来查看该页面时触发onShow ，打印App Hide，App Show
我们手动把onShow方法里面的console.log(‘App Show’) 改为consol.log(‘App Show’) 去掉一个e字母，这样会导致报错，这个时候我们onError方法就可以监听到错误

注意

应用生命周期仅可在App.vue中监听，在其它页面监听无效 。
应用启动参数，可以在API uni.getLaunchOptionsSync获取，详见(opens new window)
onlaunch里进行页面跳转，如遇白屏报错，请参考https://ask.dcloud.net.cn/article/35942(opens new window)
App.vue 不能写模板
onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）

2.页面生命周期

页面简介 | uni-app官网 (dcloud.net.cn)

uni-app 支持如下页面生命周期函数：

函数名	说明	平台差异说明	最低版本
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载

index.vue页面里面定义的页面生命周期函数如下：

export default {
    data() {
        return {
            title: 'Hello'
        }
    },
    onLoad(option) {
        console.log('页面加载了', option);
    },
    onShow() {
        console.log('页面显示了');
    },
    onReady() {
        console.log('页面初次渲染完成了');
    },
    onHide() {
        console.log('页面隐藏了');
    },
    onUpload() {
        console.log('页面卸载了');
    },
    methods: {

    }
}

代码分析：

第一次加载首页，触发onLoad，onShow，onReady方法，依次打印页面加载了，页面显示了，页面初次渲染完成了
当你在浏览器离开页面，去查看其它页面，或者其它应用，会触发onHide方法，打印页面隐藏了，在回来查看该页面时触发onShow方法，打印页面显示了。可以发现印页面加载了，页面初次渲染完成了都不在打印，证明onLoad，onReady方法只触发一次，而onShow，onHide方法多次触发

当我们取tabbr底部栏从首页切换到其它页面，会触发onHide方法，打印页面隐藏了。再次会到首页，触发onShow方法，打印页面显示了

tabbar的提示：

tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad

3.组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

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