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	监听用户点击右上角收藏

页面加载顺序

在这里插入图片描述

注意事项

可接收上个页面传参的声明周期：onInit、onload，经常使用的为onload
A页面使用navigateTo()页面跳转到B页面，A页面会触发onHide生命周期，B页面触发onShow；B页面返回会触发A页面onShow，B页面onUnload；（这是一个会重复触发的事件）
A页面使用redirectTo()跳转时，A页面会触发onUnload（页面生命周期）、beforeDestory（组件生命周期）、destoryed（组件生命周期），B页面触发onshow；
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