uniapp生命周期

uniapp生命周期包括应用生命周期、页面生命周期和组件生命周期；

1、应用生命周期

app.vue/uvue是uni-app的朱组件。所有页面都是在app.vue下进行切换，是应用入口文件。但app.vue本身不是页面，这里补鞥编写视图元素，也就没有。
这个文件的作用：监听应用生命周期、配置全局样式、配置全局的存储globalData；
应用生命周期仅可在app.vue中监听，在页面监听无效；

官网参考：应用生命周期详解

//app.vue页面
<script>
	// 只能在App.vue里监听应用的生命周期
	export default {
		onLaunch: function(options) {
			console.log('App Launch')
			console.log('应用启动路径：', options.path)
		},
		onShow: function(options) {
			console.log('App Show')
			console.log('应用启动路径：', options.path)
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

全局存储globalData

//app.vue页面
<script>
	// 只能在App.vue里监听应用的生命周期
	export default {
		globalData: {  
            text: '测试',
            selectedColor：'#1281c1'
        },
        onLaunch: function(options) {
			this.globalData = '测试2';
		},
		onShow: function(options) {
			getApp().globalData.text = 'test';
		}
	}
</script>

js中设置方式：getApp().globalData.text = ‘test’；
在应用onLaunch时，getApp对象还未获取，暂时可以使用this.globalData获取globalData；
如果需要把globalData的数据绑定到页面上，可在页面的onShow页面生命周期里进行变量重赋值；

//index.vue页面
<template>
	<view class="container">
	</view>
</template>
<script>
export default {
	data(){
		return {
			selectedColor: getApp().globalData.selectedColor
		}
	},
	onShow(){
		getApp().globalData.text = 'test';
	},
}
</script>
<style lang="scss" scoped>
</style>

全局样式

<style>
    /* #ifndef APP-PLUS-NVUE */
    @import './common/uni.css';
    /* #endif*/
</style>

2、页面生命周期

函数名	说明
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
onLoad	监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项
onShareAppMessage	用户点击右上角分享
onPageScroll	监听页面滚动，参数为Object
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack；
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）
onShareTimeline	监听用户点击右上角转发到朋友圈
onAddToFavorites	监听用户点击右上角收藏

//执行顺序
App onLaunch
App onShow
首页beforeCreate
首页onLoad (最早可获取data，方法，计算属性，侦听器等)
首页onshow （每次打开页面均可触发，无论是tab还是上一个页面返回，或者页面刷新）
首页created
首页beforeMount
首页onReady （ 最早可操作性DOM ）
首页mounted

页面加载顺序

注意事项

1. 可接收上个页面传参的声明周期：onInit、onload，经常使用的为onload
2. A页面使用navigateTo()页面跳转到B页面，A页面会触发onHide生命周期，B页面触发onShow；B页面返回会触发A页面onShow，B页面onUnload；（这是一个会重复触发的事件）
3. A页面使用redirectTo()跳转时，A页面会触发onUnload（页面生命周期）、beforeDestory（组件生命周期）、destoryed（组件生命周期），B页面触发onshow；
4. onInit仅百度小程序基础库3.260以上支持；其他版本或平台可使用onload兼容。

navigateTo()保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
redirectTo(OBJECT)关闭当前页面，跳转到应用内的某个页面；

onbackpress使用场景参考
官网详情

3、组件生命周期

uniapp的组件生命周期与vue标准组件的生命周期相同；

4、生命周期的执行顺序

app.vue + 单个页面

//app.vue页面
<script>
	export default {
        onLaunch: function(options) {
			console.log('App onLaunch')
		},
		onShow: function(options) {
			console.log('App onShow')
		}
	}
</script>

//pages文件中index.vue页面
<template>
	<view class="container">
	</view>
</template>
<script>
export default {
	onLoad() {
		console.log('首页onLoad');
	},
	onShow() {
		console.log('首页onshow');
	},
	onHide() {
		console.log('首页onhide');
	},
	beforeCreate() {
		console.log('首页beforeCreate');
	},
	created() {
		console.log('首页created');
	},
	beforeMount() {
		console.log('首页beforeMount');
	},
	mounted() {
		console.log('首页mounted');
	},
	onReady() {
		console.log('首页onReady');
	},
	onUnload() {
		console.log('首页onUnload');
	},
	data(){
		return {}
	}
}
</script>
<style lang="scss" scoped>
</style>

//执行顺序
App onLaunch
App onShow
首页beforeCreate
首页onLoad
首页onshow
首页created
首页beforeMount
首页onReady
首页mounted

包含组件的页面

//pages文件中index.vue页面
<template>
	<view class="container">
		<uni-badge class="uni-badge-left-margin" text="uni组件" />
		...
		...
	</view>
</template>
<script>
export default {
	data(){
		return {}
	}
}
</script>
<style lang="scss" scoped>
</style>

//执行顺序
首页beforeCreate
首页onLoad
首页onshow
首页created
首页beforeMount
组件beforeCreate
组件created
组件beforeMount
   组件2 beforeCreate 》 组件2 created 》 组件2 beforeMount
   组件3 beforeCreate 》 组件3 created 》 组件3 beforeMount
组件mounted
组件2 mounted
组件3 mounted
首页onReady
首页mounted

一般使用场景

1. page onload（接收页面传参）
2. page mounted（配合后端接口获取数据）

tab页为列表时，点击可进入详情页；

APP首次进入tab页会触发mounted，之后tab切换不会触发mounted，从详情页返回依然不会触发；
若每次打开页面都需调取数据：则建议使用onshow生命周期；
若要点击tab调取数据：则建议使用onTabItemTap生命周期；

普通页面生命周期的执行

普通页面使用uni.navigateTo()实现跳转；每次打开页面均可触发mounted；
但页面返回时不触发mounted，只会触发onshow；

Tab首页

系统首次登录跳转至首页可触发：onshow、mounted；
退出登录不关闭系统重新登陆时触发：onshow；
点击底部tab切换首页触发：onshow、onTabItemTap；
首页有列表进入详情页，从详情页返回时触发：onshow