文章已同步至掘金：https://juejin.cn/post/6917438354938134536
欢迎访问😃，有任何问题都可留言评论哦~

uni-app应用生命周期函数

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 vue 向 vue 通讯
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化

注意：

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

uni-app页面生命周期函数

函数名	说明	平台差异说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	5+App、微信小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面上拉触底事件的处理函数
onTabItemTap	点击 tab 时触发，参数为Object	微信小程序、百度小程序、H5、5+App（自定义组件模式）
onShareAppMessage	用户点击右上角分享	微信小程序、百度小程序、头条小程序、支付宝小程序
onPageScroll	监听页面滚动，参数为Object	5+ App、H5
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解	5+ App、H5
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	5+ App、H5
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	5+ App、H5
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	5+ App、H5

注意：

• 页面生命周期仅在page页面有效，而单独封装的组件中【页面周期无效】，但是Vue的生命周期依然有效 【Vue的生命周期在任何地方都是有效的】
• 推荐使用uni-app里面的 onReady 代替 vue 里面的 mounted
• 推荐使用uni-app里面的 onLoad 代替 vue 里面的 created

Vue生命周期函数

函数	说明
beforeCreate	初始化时间之后，实例被创建之前执行代码
created	用来在一个实例被创建之后执行代码
beforeMound	实例被挂载之前执行的代码
mounted	实例被挂载完成后执行的代码
beforeUpdate	当data数据被修改时，DOM重新渲染并更新应用之前执行代码
updated	当data数据被修改时，DOM重新渲染并更新应用后执行代码
beforeDestroy	在解除绑定销毁子组件以及事件监听器之前执行代码
destroyed	在解除绑定销毁子组件以及事件监听器后执行代码

详细内容请参考文章：Vue 生命周期与钩子函数

uni-app页面渲染及触发的生命周期

**页面加载过程：**加载 => 显示 => 加载完成 => 页面隐藏 => 页面卸载

**触发页面生命周期：**onLoad:监听页面加载 => onShow:监听页面显示 => onReady:监听页面初次渲染完成 => onHide:监听页面隐藏 => onUnload:监听页面卸载

uni-app不同端生命周期支持情况

揉合生命周期初始化执行顺序

<template>
	<view class="content">
        <view>{{msg}}</view> 
        <button @click="changeMsg">修改数据</button>
	</view>
</template>

<script>
    export default {
        data () { 
            return {
                msg: '测试', 
            }
        },
        methods: {
            changeMsg () {
                this.msg = '修改测试数据'
            },
        },
        onLoad() {
            console.log('onLoad');  // 页面加载
        },
        onShow() {
            console.log('onShow');  // 页面显示
        },
        onReady() {
            console.log('onReady');  // 页面初次渲染完成
        },
        onHide() {
            console.log('onHide');  // 页面隐藏
        },
        onUnload(){
            console.log('onUnload');  // 页面卸载
        },
        // vue生命周期
        beforeCreate() {
            console.log('beforeCreate');
        },
        created() {
            console.log('created');
        },
        beforeMount() {
            console.log('beforeMount');
        },
        mounted() {
            console.log('mounted');
        },
        beforeUpdate() {
            console.log('beforeUpdate');
        },
        updated() {
            console.log('updated');
        },
        beforeDestroy() {
            console.log('beforeDestroy');
        }
    }
</script>

初始化加载顺序

beforeCreate
created
beforeMount
onLoad
onShow
mounted
onReady

更新数据加载顺序

beforeUpdate
updated

7_7