uniapp 开发小程序页面与组件的生命周期的顺序，父组件与子组件的生命周期的顺序

最近在项目开发的时候，遇到页面生命周期和组件生命周期的问题，就突发奇想，这些生命周期之间的触发顺序到底是怎样的？
下面就带你研究一下：

1.步骤1 用hbuilder创建一个uniapp项目，页面结构如下：

2.组件demo01 嵌套组件demo02

组件demo01
<template>
	<view>
		demo01
		<demo02></demo02>
	</view>
</template>

<script>
	export default {
		name:"demo01",
		data() {
			return {
				
			};
		},
		beforeCreate() {
			console.log('demo01 11111')
		},
		created() {
			console.log('demo01 22222')
		},
		beforeMount() {
			console.log('demo01 33333')
		},
		mounted() {
			console.log('demo01 44444')
		},
		beforeDestroy() {
			console.log('demo01 55555')
		},
		destroyed() {
			console.log('demo01 66666')
		},
		
	}
</script>

组件demo02
<template>
	<view>
		demo02
	</view>
</template>

<script>
	export default {
		name:"demo02",
		data() {
			return {
				
			};
		},
		beforeCreate() {
			console.log('demo02 11111')
		},
		created() {
			console.log('demo02 22222')
		},
		
		beforeMount() {
			console.log('demo02 33333')
		},
		mounted() {
			console.log('demo02 44444')
		},
		beforeDestroy() {
			console.log('demo02 55555')
		},
		destroyed() {
			console.log('demo02 66666')
		}
		
	}
</script>

3.以index页面作为测试,

<template>
	<view class="content">
		indexPage
		<demo01></demo01>
		<button type="default" @click="jump">跳转</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			console.log('index 11111')
		},
		onShow() {
			console.log('index 22222')
		},
		onReady() {
			console.log('index 33333')
		},
		onHide() {
			console.log('index 44444')
		},
		onUnload() {
			console.log('index 55555')
		},
		methods:{
			jump(){
				uni.redirectTo({
					url:'../../pages/log/log'
				})
			}
		}
	}
</script>

4.运行结果为
渲染过程：

卸载过程：

5.结果分析

1.渲染完成之前，即mounted之前
组件（父子组件都是）生命周期优先于页面生命周期；父组件，子组件直接的顺序是父组件优先于子组件。
执行过程：
父beforeCreate=>父created=>父beforeMount=>子beforeCreate=>子created=>子beforeMount=>页面onLoad=>页面onShow；
2.渲染完成时，即beforeDestroy之前
组件（父子组件都是）生命周期优先于页面生命周期；父组件，子组件直接的顺序是子组件优先于父组件。
子mounted=>父mounted=>页面onReady；
3.销毁过程：
页面生命周期优先于组件生命周期（父子组件都是）；父组件，子组件直接的顺序是子组件优先于父组件
页面onUnload=>子beforeDestroy=>子destroyed=>父beforeDestroy=>父destroyed