# 06 【uniapp生命周期】

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

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

# 1.应用生命周期

uni-app官网 (dcloud.net.cn)open in new window

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)open in new window
• onlaunch里进行页面跳转，如遇白屏报错，请参考https://ask.dcloud.net.cn/article/35942(opens new window)open in new window
• App.vue 不能写模板
• onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）

# 2.页面生命周期

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

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

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等生命周期：