uni-app生命周期(三)

文章目录

  • 一、uni-app的生命周期
  • 二、应用生命周期
  • 三、页面的生命周期函数
    • 1.简介
    • 2.页面加载时序介绍
    • 3.页面加载常见问题
    • 4.页面加载顺序
    • 4.部分生命周期介绍
  • 四、组件的生命周期函数


一、uni-app的生命周期

  1. 应用生命周期(整个App的生命周期)
    在app.vue里面调用的,通过App(Object)函数用来注册一个小程序,指定其小程序的生命周期回调
    应用生命周期仅可在App.vue中监听,在页面监听无效。
  2. 页面生命周期(单个页面(page)的生命周期)
    每当进入/切换到一个新的页面的时候,就会调用的生命周期函数,同样通过App(Object)函数用来注册一个页面
  3. 组件生命周期(组件(component)的生命周期)
    指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发
    组件支持的生命周期,与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期

二、应用生命周期

  1. App.vue/uvue是uni-app的主组件。uni-app js引擎版是app.vue。uni-app x是app.uvue。
    所有页面都是在App.vue下进行切换的,是应用入口文件。但App.vue本身不是页面,这里不能编写视图元素,也就是没有<template>
  2. App.vue/uvue文件的作用包括:监听应用生命周期、配置全局样式、配置全局的存储globalData
  3. 应用生命周期仅可在App.vue中监听,在页面监听无效
函数名说明平台兼容
onLaunch当uni-app 初始化完成时触发(全局只触发一次),参数为应用启动参数,同 uni.getLaunchOptionsSync 的返回值
onShow当 uni-app 启动,或从后台进入前台显示,参数为应用启动参数,同 uni.getLaunchOptionsSync 的返回值
onHide当 uni-app 从前台进入后台
onError当 uni-app 报错时触发app-uvue 不支持
onUniNViewMessage对 nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯app-uvue 不支持
onUnhandledRejection对未处理的 Promise 拒绝事件监听函数(2.8.1+ app-uvue 暂不支持)app-uvue 不支持
onPageNotFound页面不存在监听函数app-uvue 不支持
onThemeChange监听系统主题变化app-uvue 不支持
onLastPageBackPress最后一个页面按下Android back键,常用于自定义退出app-uvue-android 3.9+
onExit监听应用退出app-uvue-android 3.9+
<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>
  1. 应用生命周期仅可在App.vue中监听,在其它页面监听无效。
  2. 以组合式 API 使用时,在 Vue2 和 Vue3 中存在一定区别,请分别参考:Vue2 组合式 API 使用文档 和 Vue3 组合式 API 使用文档。
  3. 应用启动参数,可以在API uni.getLaunchOptionsSync获取,详见
    onlaunch里进行页面跳转,如遇白屏报错,请参考https://ask.dcloud.net.cn/article/35942
  4. App.vue 不能写模板
  5. onPageNotFound 页面实际上已经打开了(比如通过分享卡片、小程序码)且发现页面不存在,才会触发,api 跳转不存在的页面不会触发(如 uni.navigateTo)

三、页面的生命周期函数

1.简介

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

函数名说明平台兼容最低版本
onInit监听页面初始化,其参数同 onLoad 参数,为上个页面传递的数据,参数类型为 Object(用于页面传参),触发时机早于 onLoad百度小程序3.1.0+
onLoad监听页面加载,该钩子被调用时,响应式数据、计算属性、方法、侦听器、props、slots 已设置完成,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参)
onShow监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady监听页面初次渲染完成,此时组件已挂载完成,DOM 树($el)已可用,注意如果渲染速度快,会在页面进入动画完成前触发
onHide监听页面隐藏
onUnload监听页面卸载
onResize监听窗口尺寸变化App、微信小程序、快手小程序
onPullDownRefresh监听用户下拉动作,一般用于下拉刷新
onReachBottom页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项
onTabItemTap点击 tab 时触发,参数为Object,具体见下方注意事项微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage用户点击右上角分享微信小程序、QQ小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序
onPageScroll监听页面滚动,参数为Objectnvue不支持序
onNavigationBarButtonTap监听原生标题栏按钮点击事件,参数为ObjectApp、H5
onBackPress监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack;app、H5、支付宝小程序
onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件App、H51.6.0
onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。App、H51.6.0
onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件(pages.json 中的 searchInput 配置 disabled 为 true 时才会触发)App、H51.6.0
onShareTimeline监听用户点击右上角转发到朋友圈微信小程序2.8.1+
onAddToFavorites监听用户点击右上角收藏微信小程序2.8.1+

vue2 页面及组件生命周期流程图
在这里插入图片描述
vue3 页面及组件生命周期流程图
在这里插入图片描述

2.页面加载时序介绍

介绍onLoad、onReady、onShow的先后关系,页面加载的详细流程。

  1. uni-app框架,首先根据pages.json的配置,创建页面

    原生导航栏是最快显示的。页面背景色也应该在这里配置。

  2. 根据页面template里的组件,创建dom。

    这里的dom创建仅包含第一批处理的静态dom。
    对于通过js/uts更新data然后通过v-for再创建的列表数据,不在第一批处理。
    要注意一个页面静态dom元素过多,会影响页面加载速度。在uni-app x Android版本上,可能会阻碍页面进入的转场动画。 因为此时,页面转场动画还没有启动。

  3. 触发onLoad

    此时页面还未显示,没有开始进入的转场动画,页面dom还不存在。
    所以这里不能直接操作dom(可以修改data,因为vue框架会等待dom准备后再更新界面);在 app-uvue 中获取当前的activity拿到的是老页面的activity,只能通过页面栈获取activity。
    onLoad比较适合的操作是:接受上页的参数,联网取数据,更新data。
    手机都是多核的,uni.request或云开发联网,在子线程运行,不会干扰UI线程的入场动画,并行处理可以更快的拿到数据、渲染界面。
    但onLoad里不适合进行大量同步耗时运算,因为此时转场动画还没开始
    尤其uni-app x 在 Android上,onLoad里的代码(除了联网和加载图片)默认是在UI线程运行的,大量同步耗时计算很容易卡住页面动画不启动。除非开发者显式指定在其他线程运行。

  4. 转场动画开始

    新页面开始进入的转场动画,动画默认耗时300ms,可以在路由API中调节时长。

  5. 页面onReady

    第2步创建dom是虚拟dom,dom创建后需要经历一段时间,UI层才能完成了页面上真实元素的创建,即触发了onReady。
    **onReady后,页面元素就可以自由操作了,**比如ref获取节点。同时首批界面也渲染了。
    注意:onReady和转场动画开始、结束之间,没有必然的先后顺序,完全取决于dom的数量和复杂度。
    如果元素排版和渲染够快,转场动画刚开始就渲染好了;
    大多情况下,转场动画走几格就看到了首批渲染内容;
    如果元素排版和渲染过慢,转场动画结束都没有内容,就会造成白屏
    联网进程从onLoad起就在异步获取数据更新data,如果服务器速度够快,第二批数据也可能在转场动画结束前渲染。

  6. 转场动画结束

    再次强调,5和6的先后顺序不一定,取决于首批dom渲染的速度

3.页面加载常见问题

  1. 优化白屏的方法:
    • 页面dom太多,注意有的组件写的不好,会拖累整体页面。uni-app x 里减少dom数量的策略,详见
    • 联网不要在onReady里,那样太慢了,在onLoad里早点联网
    • 在pages.json里配置原生导航栏和背景色
    • 有的页面template内容非常少,整页就是一个需要联网加载的列表,这会造成虽然首批dom飞快渲染了,但页面其实还是白的,联网后才能显示字和图。 此时需要在template里做一些简单占位组件,比如loading组件、骨架屏,让本地先显示一些内容。
  2. 卡住动画不启动的原因:
    • 页面dom太多,注意有的组件写的不好,会拖累整体页面。uni-app x 里减少dom数量的策略,详见
    • onLoad里执行了耗时的同步计算

4.页面加载顺序

首次加载渲染过程

  1. 应用级
    onLaunch --> onShow
  2. 页面级
    onLoad --> onShow
  3. 组件级
    beforeCreate --> created --> beforeMount --> mounted
  4. 页面级
    onReady

跳转到其他页面
由 页面1 跳转到 页面2

页面1 onHide
页面2 onLoad --> onShow --> onReady

返回页面
由 页面2 返回 页面1

页面2 onUnload
页面1 onShow

应用进入后台

应用级 onHide
页面级 onHide

应用进入前台

应用级 onShow
页面级 onShow

4.部分生命周期介绍

  1. onShow和onHide
    • 注意页面显示,是一个会重复触发的事件。
    • a页面刚进入时,会触发a页面的onShow。
    • 当a跳转到b页面时,a会触发onHide,而b会触发onShow。
    • 但当b被关闭时,b会触发onUnload,此时a再次显示出现,会再次触发onShow。
    • 在tabbar页面(指pages.json里配置的tabbar),不同tab页面互相切换时,会触发各自的onShow和onHide。
  2. onInit

    • 仅百度小程序基础库 3.260 以上支持 onInit 生命周期
    • 其他版本或平台可以同时使用 onLoad 生命周期进行兼容,注意避免重复执行相同逻辑
    • 不依赖页面传参的逻辑可以直接使用 created 生命周期替代
  3. onLoad

    • uni-app x android 平台,如需获取 activity 实例,此时当前页面的 activity 实例并未创建完成,会获取到上一个页面的 activity 实例(首页会获取应用默认的 activity 实例)。如需获取当前页面的 activity 实例,应在 onShow 或 onReady 生命周期中获取。
  4. onReachBottom
    • 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance,
    • 比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。
    • 如使用scroll-view导致页面没有滚动,则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档。
  5. onPageScroll
    参数说明
属性类型说明
scrollTopNumber页面在垂直方向已滚动的距离(单位px)
onPageScroll : function(e) { //nvue暂不支持滚动监听,可用bindingx代替console.log("滚动距离为:" + e.scrollTop);
},

  • onPageScroll里不要写交互复杂的js,比如频繁修改页面。因为这个生命周期是在渲染层触发的,在非h5端,js是在逻辑层执行的,两层之间通信是有损耗的。如果在滚动过程中,频发触发两层之间的数据交换,可能会造成卡顿。(uvue在app端无此限制)
  • 在webview渲染时,比如app-vue、微信小程序、H5中,也可以使用wxs监听滚动;在app-nvue中,可以使用bindingx监听滚动。
  • 如果想实现滚动时标题栏透明渐变,在App和H5下,可在pages.json中配置titleNView下的type为transparent。(uni-app x不支持)
  • 如果需要滚动吸顶固定某些元素,推荐使用css的粘性布局插件市场。插件市场也有其他js实现的吸顶插件,但性能不佳,需要时可自行搜索。(uni-app x可自由在uts中设置固定位置)
  1. onBackPress
    参数说明
属性类型说明
fromString触发返回行为的来源:‘backbutton’——左上角导航栏按钮及安卓返回键;‘navigateBack’——uni.navigateBack() 方法。支付宝小程序端不支持返回此字段
export default {onBackPress(options) {console.log('from:' + options.from)}
}

  • onBackPress上不可使用async,会导致无法阻止默认返回
  • 支付宝小程序只有真机可以监听到非navigateBack引发的返回事件(使用小程序开发工具时不会触发onBackPress),不可以阻止默认返回行为
  1. onTabItemTap
    参数说明
属性类型说明
indexNumber被点击tabItem的序号,从0开始
pagePathString被点击tabItem的页面路径
textString被点击tabItem的按钮文字
onTabItemTap : function(e) {console.log(e);// e的返回格式为json对象: {"index":0,"text":"首页","pagePath":"pages/index/index"}
},

  • onTabItemTap常用于点击当前tabitem,滚动或刷新当前页面。如果是点击不同的tabitem,一定会触发页面切换。
  • 如果想在App端实现点击某个tabitem不跳转页面,不能使用onTabItemTap,可以使用plus.nativeObj.view放一个区块盖住原先的tabitem,并拦截点击事件。
  • 支付宝小程序平台onTabItemTap表现为点击非当前tabitem后触发,因此不能用于实现点击返回顶部这种操作
  1. onNavigationBarButtonTap
    参数说明
属性类型说明
indexNumber原生标题栏按钮数组的下标
onNavigationBarButtonTap : function (e) {console.log(e);// e的返回格式为json对象:{"text":"测试","index":0}
}

四、组件的生命周期函数

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

函数名说明平台兼容最低版本
beforeCreate在实例初始化之前被调用。
created在实例创建完成后被立即调用。
beforeMount在挂载开始之前被调用。
mounted挂载到实例上去之后调用。 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTick
beforeUpdate数据更新时调用,发生在虚拟 DOM 打补丁之前。仅H5平台支持
updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。仅H5平台支持
beforeDestroy实例销毁之前调用。在这一步,实例仍然完全可用。
destroyedVue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/423404.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

是德keysight N7552A 9G电子校准件2端口

是德keysight N7552A 9G电子校准件2端口 频率范围为直流到 9 GHz 支持 N 型和 3.5 mm 连接器 更小、更轻巧的 2 端口电子校准件 零等待时间&#xff0c;实现更快校准 兼具电子校准件的便利性与经济型机械套件的性能 N7552A 支持是德科技的 PNA-X、PNA、ENA、PXI 矢量网络分…

四、滑动窗口-算法总结

文章目录 四、滑动窗口4.1 模板4.2 示例4.2.1 最小覆盖子串4.2.2 字符串的排列4.2.3 找到字符串中所有字母异位词4.2.4 无重复字符的最长子串 四、滑动窗口 4.1 模板 /* 滑动窗口算法框架 */ void slidingWindow(string s, string t) {unordered_map<char, int> need, …

QT::QComboBox自定义左击事件信号

因为QComboBox没有自定义的clink信号&#xff0c;所以自己新建一个MyComBox类继承QComboBox&#xff0c;并且添加自定义的左击信号&#xff0c;以及使用该信号连接一个槽函数 mycombobox.h #ifndef MYCOMBOBOX_H #define MYCOMBOBOX_H#include <QComboBox> #include &l…

在 Mac 上安装虚拟机怎么样,安装虚拟机与直接安装 Windows 系统有区别吗?

随着跨系统操作的不断发展&#xff0c;虚拟机技术在生产力领域扮演着越来越重要的角色。Mac作为一款主流的操作系统&#xff0c;也有着运行虚拟机的能力。接下来给大家介绍Mac装虚拟机好不好&#xff0c;Mac装虚拟机和装Windows系统一样吗的具体内容。 Mac装虚拟机好不好 Mac…

通信工程学习:什么是FDMA频分多址

FDMA&#xff1a;频分多址 FDMA&#xff08;Frequency Division Multiple Access&#xff0c;频分多址&#xff09;是一种在无线通信领域广泛应用的多址技术。该技术通过将可用的频谱资源按频率划分&#xff0c;把传输频带划分为若干较窄且互不重叠的子频带&#xff08;或称信道…

SprinBoot+Vue爱老助老服务平台的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平台Java领域优质…

c/c++面试100道

1.一道笔试题解析_哔哩哔哩_bilibili P20&#xff1a;#define offsetof(TYPE, MEMBER) ((size_t)&((TYPE*)0)->MEMBER) 1、 offsetof 宏是 C 语言中用于计算结构体成员相对于结构体起始地址的偏移量的宏定义。这个宏的定义如下&#xff1a; #define offsetof(TYPE, …

JavaScript模块化——ES6模块化规范

作者&#xff1a;CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 使用环境&#xff1a;vscode Chrome浏览器 1.ES6 1.1ES6介绍 ES6的全称是ECMAScript 6&#xff0c;也称为ES2015&#xff0c;是JavaScript的一个重要版本&#xff0c;它引入了许多新特性和改进&#xf…

Linux搭建邮箱服务器(简易版)

本章是上一文档的简易版本搭建方式更为快速简洁&#xff08;只需要两条命令即可搭建&#xff09;&#xff0c;如果想了解更详细一些可以看我上一文档 Linux接发邮件mailx_linux mailx o365-CSDN博客文章浏览阅读857次&#xff0c;点赞25次&#xff0c;收藏19次。本文详细描述了…

独立站内容营销SOP 1.0 丨出海笔记

提到内容营销&#xff0c;可能很多朋友都听过但没深入做&#xff0c;国内跨境独立站通过内容营销做的大流量的目前不多&#xff0c;哪怕大如 Shein, Anker&#xff0c;大部分时候还是在买量获客的阶段。 但大家只要明白一点即可&#xff1a;内容做得好不好&#xff0c;直接影响…

文档智能:OCR+Rocketqa+layoutxlm

此次先记录LayoutLMv2&#xff0c;梳理相关论文&#xff0c;记录如下&#xff1a; 首先认识一下 visually-rich document understanding tasks → \to → VrDU 其次&#xff0c;the text fields of interest&#xff0c;与图像识别的感兴趣区域 region of Interest 类似&…

【脑机接口】脑机接口性能的电压波形的尖峰分类和阈值比较

Comparison of spike sorting and thresholding of voltage waveforms for intracortical brain–machine interface performance 脑机接口性能的电压波形的尖峰分类和阈值比较论文下载&#xff1a;摘要1 介绍2 方法2.1数据获取2.2spike sorting 技术2.3神经数据分析 3结果3.1神…

社交媒体的未来:Facebook如何通过AI技术引领潮流

在数字化时代的浪潮中&#xff0c;社交媒体平台不断演变&#xff0c;以适应用户需求和技术发展的变化。作为全球领先的社交媒体平台&#xff0c;Facebook在这一进程中扮演了重要角色。尤其是人工智能&#xff08;AI&#xff09;技术的应用&#xff0c;正在深刻地改变Facebook的…

搜索树和Map

一.搜索树 1.概念 二叉搜索树又叫二叉排序树&#xff0c;它可以是一颗空树也可以是具有以下性质的二叉树 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根节点的值它的左子树也分别为二…

NR intra-freq和inter-freq测量

intra-freq 测量和inter-freq测量可以分为以下几类&#xff1a; 1 SSB based intra-freq 测量&#xff1a;serving cell SSB的center freq与邻区 SSB的center freq 相同并且两个SSB 的SCS也相同。 2 SSB based inter-freq 测量&#xff1a;serving cell SSB的center freq与邻…

用Qt 对接‌百度语音识别接口

一 、前期准备工作 1&#xff0c;搭建好开发环境&#xff1b; 2&#xff0c;注册百度云平台&#xff0c;获取语音相关东西&#xff0c; 短语音识别标准版_短语音识别-百度AI开放平台 (baidu.com) 3&#xff0c;涉及到的Qt 类有 QAudioFormat&#xff0c;QAudioDeviceInfo&a…

【HarmonyOS NEXT开发】如何设置水平/垂直方向的左/居中/右对齐——RelativeContainer的AlignRules设置

文章目录 【HarmonyOS NEXT开发】如何设置水平/垂直方向的左/居中/右对齐——RelativeContainer的AlignRules设置RelativeContainer 和 AlignRules 的关系AlignRules 语法详解 【HarmonyOS NEXT开发】如何设置水平/垂直方向的左/居中/右对齐——RelativeContainer的AlignRules设…

Cesium 展示——Cesium 初始化视角在中国并加载数据(china.json)

文章目录 需求一:初始化视角在中国分析需求二:加载中国数据(china.json)需求一:初始化视角在中国 在初始化 Cesium 的 Viewer 后,视角是在美国,如何让其视角指向中国 分析 viewer.value = new Cesium.Viewer(cesiumContainer.value, {homeButton

Linux通配符*、man 、cp、mv、echo、cat、more、less、head、tail、等指令、管道 | 、指令的本质 等的介绍

文章目录 前言一、Linux通配符*二、man 指令三、 cp 指令四、mv指令五、 echo 指令六、cat 指令七、more 指令八、 less 指令九、 head 指令十、 tail指令十一、 管道 |十二、指令的本质总结 前言 Linux通配符*、man 、cp、mv、echo、cat、more、less、head、tail、等指令、管…

如何使用 ONNX 结合 GPU 加速推理(CUDA 与 cuDNN 简明指南)

前言 在深度学习模型推理中,使用 GPU 进行加速是提升模型推理速度的关键方式之一。 本文将带大家一步步了解如何使用 ONNX Runtime 结合 NVIDIA 的 CUDA 和 cuDNN 进行 GPU 加速。 一、查找ONNX、CUDA与cuDNN之间的对应版本 首先,我们需要确保 ONNX Runtime 与 CUDA 和 cu…