目 录CONTENT

文章目录

uni-app与vue生命周期对比

俊阳IT知识库
2023-03-16 / 0 评论 / 0 点赞 / 515 阅读 / 1,255 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-03-16,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告

文章已同步至掘金: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不同端生命周期支持情况

uniapp-vue-life-cycle-1

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

<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

0

评论区