uni-app的生命周期

1.应用的生命周期

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

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

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

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

  应用生命周期函数是在App.vue中定义的，代码如下：

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			consol.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方法就可以监听到错误

2.页面的生命周期

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

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

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

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

		}
	}
</script>

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

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

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

  onUnload方法较难操作验证，此处不分析