当前位置: 首页 > news >正文

uni-app的生命周期(应用,页面生命周期)

1. uni-app的生命周期(应用,页面生命周期)

1.1. 应用生命周期

1.1.1. 定义在app.vue中

生命周期函数名说明
onLaunch当uni-app 初始化完成时触发(全局只触发一次)
onShow当 uni-app 启动,或从后台进入前台显示(多次触发)
onHide当 uni-app 从前台进入后台(多次触发)
onUniNViewMessage对 nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯(出现代码异常,报错时触发)

注意:

  (1)应用生命周期仅可在App.vue中监听,在其它页面监听无效。
  (2)onlaunch里进行页面跳转,如遇白屏报错,请参考 https://ask.dcloud.net.cn/article/35942

1.2. 页面生命周期

1.2.1. 定义在各个页面中

生命周期函数名说明e
onLoad监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参)(单次触发)
onShow监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面(多次触发)
onReady监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发(单次触发)
onHide监听页面隐藏(多次触发)
onUnload监听页面卸载
onResize监听窗口尺寸变化
onPullDownRefresh监听用户下拉动作,一般用于下拉刷新
onPageScroll监听原生标题栏按钮点击事件,参数为Object
onReachBottom页面滚动到底部的事件(不是scroll-view滚到底),常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动,则触底事件不会被触发

注意:
  (1)H5端onBackPress只能监听页面导航栏的返回按钮的点击事件,不能监听浏览器返回以及手机的返回
  (2)页面生命周期仅在page页面有效,而单独封装的组件中【页面周期无效】,但是Vue的生命周期依然有效 【Vue的生命周期在任何地方都是有效的】
  (3)推荐使用uni-app里面的onReady 代替 vue 里面的 mounted
  (4)推荐使用uni-app里面的onLoad 代替 vue 里面的 created

1.2.2. onPageScroll 参数说明:

  属性:scrollTop 类型:Number 说明 : 页面在垂直方向已滚动的距离(单位px)

1.2.3. 生命周期函数执行顺序:

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

1.2.4. Page页面生命周期函数执行顺序

  beforeCreate => onLoad => onShow => created => beforeMount => onReady => mounted

1.2.5. 刷新数据后

  beforeUpdate => updated

相关文章:

uni-app的生命周期(应用,页面生命周期)

1. uni-app的生命周期(应用,页面生命周期) 1.1. 应用生命周期 1.1.1. 定义在app.vue中 生命周期函数名说明onLaunch当uni-app 初始化完成时触发(全局只触发一次)onShow当 uni-app 启动,或从后台进入前台…...

响应式企业网站建站系统源码 模版丰富+一站式建站 全开源可二次开发 带源码包+搭建部署教程

系统概述 在数字化转型的浪潮中,企业官网作为品牌展示、产品推广及客户服务的重要窗口,其建设质量直接影响着企业的线上形象与市场竞争力。响应式企业网站建站系统源码的出现,为企业提供了一种高效、灵活且成本可控的建站解决方案。 代码示…...

如何解除内存卡的写保护并格式化为exFAT文件系统

最近有客户提问内存卡提示写保护,且无法格式化为exFAT格式的问题,可能是由于多种原因引起的。以下是一些可能的解决方法: 1. 检查物理写保护开关 一些SD卡和MicroSD卡适配器上有一个小的物理开关,可以启用或禁用写保护。确保这个…...

【 EI会议 | 西南大学主办 | 往届均已实现检索】第三届神经形态计算国际会议(ICNC 2024)

第三届神经形态计算国际会议(ICNC 2024) 2024 3rd International Conference on Neuromorphic Computing (ICNC 2024) 一、重要信息 大会官网:www.ic-nc.org(点击投稿/参会/了解会议详情) 会议时间:2024年12月13-15…...

利用python爬虫采集苹果公司各产品销售收入统计报告

数据为2013年到2022年苹果公司各产品(iPhone、iPad、Mac等)及服务的销售收入。iPhone是苹果公司销售收入最高的产品。 数据统计单位为:亿美元 。 数据说明: 数据整理自苹果公司历年10-K文件,每年10-K文件可能对之前年…...

ethercat igh可能出现的两个bug

1. 插入网线直接就进入op状态,这可能是因为 从站支持eoe协议 igh对eoe协议支持的从站默认使其直接进入op状态,可以修改igh源码编译选项,不启动eoe协议 可以参考: igh编译选项 igh一些EoE协议说明 Automatic Configuration&#…...

计算机网络知识点(三)

目录 一、简述TCP连接和关闭的状态转移 二、简述TCP慢启动 三、简述TCP如何保证有序 四、简述TCP常见的拥塞控制算法 五、简述TCP超时重传 一、简述TCP连接和关闭的状态转移 状态转移图 图中上半部分是TCP的三次握手过程的状态变迁,下半部分是TCP四次挥手过程的…...

关于认证协议

本地用户认证 本地认证的意思就是,我们的电脑上存储着自己的账号密码,无论电脑是否联网,只要能开机,就可以输入账号密码登录到电脑中,工作组就是采用本地认证 本地认证流程 winlogon.exe -> 接收用户输入 -> …...

C#操作MySQL从入门到精通(20)——更新数据

前言: 谈到数据库,大家最容易脱口而出的就是增删改查,本文所说的更新数据就是增删改查的改,改变数据的意思。 本文测试使用的数据库如下: 1、更新一列 所谓更新一列的意思就是只更改一列数据,并且通常要使用where条件,因为不加这个条件的话会导致将所有行的数据进行…...

NVMe全闪存储系统性能测试及产品功能与应用场景

今天我们继续对全闪存储系统GS 5024UE的评测,重点关注GS 5024UE的性能测试数据,以及产品所具备的功能、应用场景。通过Windows IOmeter测试软件,来测试GS 5024UE设备的性能,在机器上配上24颗 NVMe 3.84TB硬盘, 16条32Gb FC数据&am…...

C#面:C#面向对象的思想主要包括什么?

C#面向对象的思想主要包括以下几个方面: 封装(Encapsulation):封装是将数据和操作数据的方法封装在一起,形成一个类。通过封装,可以隐藏类的内部实现细节,只暴露必要的接口给外部使用。这样可以…...

海南云亿商务咨询有限公司正规吗?怎么样?

在当下数字化浪潮汹涌的时代,抖音电商作为新兴的营销渠道,正以其独特的魅力和巨大的市场潜力,吸引着越来越多的企业和品牌投身其中。作为专注抖音电商服务的佼佼者,海南云亿商务咨询有限公司凭借专业的团队、丰富的经验和前瞻的战…...

【数据结构】排序(上)

个人主页~ 堆排序看这篇~ 还有这篇~ 排序 一、排序的概念及应用1、概念2、常见的排序算法 二、常见排序的实现1、直接插入排序(1)基本思想(2)代码实现(3)时间复杂度(4)空间复杂度 2…...

vue3+el-plus对eleplus对el-table表格进行拖拽(使用sortablejs进行列拖拽和行拖拽):

如有对表格拖拽进行限制某列或某行不进行拖拽的需求,请点击: vue3ele-plussortableJs对el-table使用sortableJs插件对表格拖拽时限定某列或某行不允许拖拽-CSDN博客 如果你已实现拖拽需求,但拖拽后发现表头并未改变的话,请点击&…...

Nginx如何隐藏版本号

1 找到nginx.conf配置文件进行修改 http{...server{listen 80 default_server;listen [::]:80 default_server;server_name _;root /usr/share/nginx/html;server_tokens off; #添加这一项就可以了location / {}error_page 404 /404.html;location /40…...

用C#(WinForm)开发触摸屏,体验感满满

用C#(WinForm)开发触摸屏,体验感满满...

LaneKeepingEnv(自动驾驶仿真)

LaneKeepingEnv环境的工作原理可以归纳如下: 初始化阶段: 环境在创建时,会调用__init__方法进行初始化。初始化过程中,会设置一些关键的属性,如lane(当前车道)、lanes(所有车道的列…...

C++类与对象(拷贝与类的内存管理)

感谢大佬的光临各位,希望和大家一起进步,望得到你的三连,互三支持,一起进步 个人主页:LaNzikinh-CSDN博客 文章目录 前言一.对象的动态建立和释放二.多个对象的构造和析构三.深拷贝与浅拷贝四.C类的内存管理总结 前言 …...

C语言----字符函数和字符串函数

在编程的过程中,我们要经常处理字符和字符串,为了方便操作字符和字符串,c语言标准库中提供的一系列库函数,接下来我们就开始学习与认识他们 1.字符分类函数 c语言中有一系列的函数是专门做字符分类的,也就是一个字符…...

神经网络 torch.nn---Convolution Layers

torch.nn — PyTorch 2.3 documentation torch.nn - PyTorch中文文档 (pytorch-cn.readthedocs.io) torch.nn和torch.nn.functional的区别 torch.nn是对torch.nn.functional的一个封装,让使用torch.nn.functional里面的包的时候更加方便 torch.nn包含了torch.nn.…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...