uni-app 生命周期

微信小程序生命周期

uni-app的生命周期主要包括

• 应用生命周期（整个App的生命周期）

  在app.vue里面调用的，通过App(Object)函数用来注册一个小程序，指定其小程序的生命周期回调

  应用生命周期仅可在App.vue中监听，在页面监听无效。

• 页面生命周期（单个页面(page)的生命周期）

  指的是当你每进入/切换到一个新的页面的时候，就会调用的生命周期函数，同样通过App(Object)函数用来注册一个页面

• 组件生命周期（组件(component)的生命周期）

  指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发

  组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期

应用生命周期

所有页面都是在App.vue下进行切换的，是应用入口文件。但App.vue本身不是页面，这里不能编写视图元素，也就是没有。

这个文件的作用包括：监听应用生命周期、配置全局样式、配置全局的存储globalData

应用生命周期仅可在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>

• 应用生命周期仅可在App.vue中监听，在其它页面监听无效。

• 应用启动参数，可以在API uni.getLaunchOptionsSync获取，详见

• onlaunch里进行页面跳转，如遇白屏报错，请参考https://ask.dcloud.net.cn/article/35942

• App.vue 不能写模板

• onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）

页面生命周期

uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数，当以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别

Vue2 页面及组件生命周期流程图

Vue3 页面及组件生命周期流程图

组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期

页面加载顺序

首次加载渲染过程

1. 应用级 onLaunch
2. 应用级 onShow
   .
3. 页面级 onLoad
4. 页面级 onShow
   .
5. 组件级 beforeCreate
6. 组件级 created
7. 组件级 beforeMount
8. 组件级 mounted
   .
9. 页面级 onReady

跳转到其他页面

由 页面1 跳转到 页面2

1. 页面1 onHide
   .
2. 页面2 onLoad
3. 页面2 onShow
4. 页面2 onReady

返回页面

由 页面2 返回 页面1

1. 页面2 onUnload
   .
2. 页面1 onShow

应用进入后台

1. 应用级 onHide
   .
2. 页面级 onHide

应用进入前台

1. 应用级 onShow
   .
2. 页面级 onShow