微信小程序生命周期函数执行顺序怎么设置

所谓的生命周期，就是指一个小程序从创建到结束被卸载的整个的过程，其大致可以分为如下的三个方面。

• 应用生命周期：应用是指小程序作为一个小的应用它所存在的生命周期。
• 页面生命周期：页面生命周期是指在应用中的每个展示页面从创建到销毁的整个的过程。
• 组件生命周期：在页面展示的过程中存在各种的组件，整个的组件从加载到销毁的过程被称为是组件的生命周期。

下面我们我们就来分别介绍一下小程序的各个生命周期

应用生命周期

如图所示，所谓的应用的生命周期，在上面我们介绍过应用的生命周期是小程序从打开到销毁的整个的过程。也就是说在用户首次打开小程序的时候，onLaunch函数就会被触发，并且它在小程序整个的生命周期过程中全局只触发一次。

小程序初始化完成之后，就会触发到onShow方法，这个方法用来监听小程序正常的显示。当我们因为某些操作，小程序转入到后台运行的时候，这个时候就会触发onHide方法。然后处理完成之后再次进入小程序就会再次触发onShow方法。

当然在我们将小程序转入后台运行之后，如果小程序占用的资源过高的时候，就会被销毁。当我们再次进入的时候还是会触发onLaunch方法。

页面生命周期

所谓的页面，是指在小程序中用户所能看到的所有的展示的内容是由一个一个的Page组成，那么这些Page也是有自己的生命周期的。如下图所示

当小程序被打开之后，需要去加载页面进行展示，这个时候触发的就是加载页面的onLoad方法。页面加载完成之后，触发onShow方法，对页面进行展示渲染，如果是页面第一次被加载显示，那么就会触发一个onReady方法，这个方法就是来完成页面元素的渲染和样式的添加，每个页面在整个的应用生命周期中，只会被调用一次。当小程序进入到后台，或者是调用到了其他页面中的时候，就会触发onHide方法。当再次进入该页面之后就会触发onShwo()方法。

如果是使用了重定向的方法就会触发页面卸载的方法onUnload。

组件生命周期

组件的生命周期，在官网上有所介绍，是指组件自身的一些函数，这些函数在某些特殊的时间点或者是遇到某些事件触发操作的时候会被自动触发。在其中比较重要的就是 created、attached、detached ，因为这些函数包含了组件的整个生命周期的关键操作点。

• created：组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
• attached：在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
• detached：在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发

总结

1. 打开小程序：

(App)onLaunch –> (App)onShow –> (Pages)onLoad –> (Pages)onShow –> (pages)onReady

2. 进入下一个页面：

(Pages)onHide –> (Next)onLoad –> (Next)onShow –> (Next)onReady

3. 返回上一个页面：

(curr)onUnload –> (pre)onShow

4. 离开小程序：

(App)onHide

5. 再次进入：

小程序未销毁 –> (App)onShow(执行上面的顺序），小程序被销毁，（App)onLaunch重新开始执行。

vue3 生命周期钩子函数介绍

vue3 生命周期函数，就是在组件运行的某一条件下会被自动触发的函数。

Vue3 选项式生命周期函数

vue3 新增组合式 API ，同时也能够支持选项式 API。使用选项式 API 写法时，生命周期函数与 vue2 得一模一样：

<template>
	<div>
		<slot></slot>
	</div>
</template>

<script lang="ts">
	export default{
		beforeCreate(){
			console.log('beforeCreate');
		},
		created(){
			console.log("created");
		},
		beforeMount(){
			console.log("beforeMount");
		},
		mounted(){
			console.log("mounted");
		},
		beforeUpdate(){
			console.log("beforeUpdate");
		},
		updated(){
			console.log("updated");
		},
		activated(){
			console.log("activated");
		},
		deactivated(){
			console.log("deactivated");
		},
		befoeUnmount(){
			console.log("befoeUnmount");
		},
		unmounted(){
			console.log("unmounted");
		}
	}
</script>

Vue3 组合式生命周期函数

vue3 组合式 API 中附带了一个 setup() 方法，此方法封装了大多数组件代码，并处理了响应式、生命周期钩子函数等。其中生命周期函数与 vue2 的生命周期函数有了很大的不同，具体区别有：

• vue3 中增加 setup 函数，移除了 beforeCreate 和 created 函数。
• vue3 命名在 vue2 基础上加 ‘on’ 前缀，以驼峰命名方式命名。
• 新增 onRenderTracked、onRenderTriggered 两个函数。
• 使用之前需要先导入，然后才能使用。

setup() 是在 beforeCreate 和 created 阶段执行的，所以在 setup 内不需要这两钩子函数，剩余生命函数执行都是一样的。

具体使用示例：

<template>
	<div>
		组件内容{{ str }}
	</div>
</template>

<script lang="ts">
	import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onActivated, onDeactivated, onErrorCaptured, onBeforeUnmount, onUnmounted, onRenderTracked, onRenderTriggered  } from "vue"
	export default{
		setup(){
      let str = "sss"
			onBeforeMount(()=>{
				console.log("onBeforeMount");
			})
			onMounted(()=>{
				console.log("onMounted");
			})
			onBeforeUpdate(()=>{
				console.log("onBeforeUpdate");
			})
			onUpdated(()=>{
				console.log("onUpdated");
			})
			onActivated(()=>{
				console.log("onActivated");
			})
			onDeactivated(()=>{
				console.log("onDeactivated");
			})
			onErrorCaptured(()=>{
				console.log("onErrorCaptured");
			})
			onBeforeUnmount(()=>{
			 	console.log("onBeforeUnmount");
			})
			onUnmounted(()=>{
				console.log("onUnmounted");
			})
			onRenderTracked(()=>{
				console.log("onRenderTracked");
				debugger
			})
			onRenderTriggered(()=>{
				console.log("onRenderTriggered");
				debugger
			})
      return {
      	str
      }
		}
	}
</script>

onRenderTracked 和 onRenderTriggered 是用来调试的,这两个事件都带有一个DebuggerEvent，它使我们能够知道是什么导致了Vue实例中的重新渲染。

Vue3 setup 语法糖生命周期函数

vue3 新增的 setup() 函数还有另外一种写法，可以直接将 setup 放到 script 内，可以大大简化上边的语法。

<template>
	<div>
		组件内容{{ str }}
	</div>
</template>
<script lang="ts" setup>
	import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onActivated, onDeactivated, onErrorCaptured, onBeforeUnmount, onUnmounted, onRenderTracked, onRenderTriggered  } from "vue"
	let str = "sss"
	onBeforeMount(()=>{
		console.log("onBeforeMount");
	})
	onMounted(()=>{
		console.log("onMounted",);
	})
	onBeforeUpdate(()=>{
		console.log("onBeforeUpdate");
	})
	onUpdated(()=>{
		console.log("onUpdated");
	})
	onActivated(()=>{
		console.log("onActivated");
	})
	onDeactivated(()=>{
		console.log("onDeactivated");
	})
	onErrorCaptured(()=>{
		console.log("onErrorCaptured");
	})
	onBeforeUnmount(()=>{
	 	console.log("onBeforeUnmount");
	})
	onUnmounted(()=>{
		console.log("onUnmounted");
	})
	onRenderTracked((e)=>{
		console.log("onRenderTracked",e);
		debugger
	})
	onRenderTriggered(()=>{
		console.log("onRenderTriggered");
		debugger
	})
</script>