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

uniapp的生命周期

在 UniApp 中,生命周期函数是指在组件(如页面、视图等)创建和销毁过程中会自动触发的一些函数。UniApp 提供了多种生命周期函数,帮助开发者在适当的时机进行相关的逻辑处理。

UniApp 的生命周期函数可以分为 页面生命周期组件生命周期 两类。以下是详细的介绍:

一、页面生命周期

页面生命周期指的是每个页面从加载、显示到销毁的整个过程。

  1. onLoad
    页面加载时触发,参数 options 包含了页面的启动参数。
    适用于:获取页面传递的参数,初始化页面数据等。

    javascript

  • onLoad(options) {console.log('页面加载', options);
    }
    
  • onShow
    页面每次显示时触发。
    适用于:页面显示时需要刷新数据或处理一些界面相关的逻辑。

    javascript

  • onShow() {console.log('页面显示');
    }
    
  • onReady
    页面首次渲染完成时触发。
    适用于:页面渲染完成后的一些处理,通常用于 DOM 操作等。

    javascript

  • onReady() {console.log('页面渲染完成');
    }
    
  • onHide
    页面隐藏时触发(如进入后台、页面跳转)。
    适用于:暂停或保存状态,避免一些不必要的操作。

    javascript

  • onHide() {console.log('页面隐藏');
    }
    
  • onUnload
    页面卸载时触发(如页面被销毁,用户离开页面)。
    适用于:页面销毁时进行清理操作,如清除定时器、取消订阅等。

    javascript

  • onUnload() {console.log('页面卸载');
    }
    
  • onPullDownRefresh
    用户下拉页面时触发。
    适用于:刷新页面内容。

    javascript

  • onPullDownRefresh() {console.log('页面下拉刷新');
    }
    
  • onReachBottom
    页面触底时触发。
    适用于:加载更多数据。

    javascript

  • onReachBottom() {console.log('页面触底');
    }
    
  • onPageScroll
    页面滚动时触发。
    适用于:监听滚动位置变化,执行页面滚动相关操作。

    javascript

  • onPageScroll(e) {console.log('页面滚动', e);
    }
    
  • onShareAppMessage
    用户点击分享按钮时触发。
    适用于:定制分享内容。

    javascript

  1. onShareAppMessage() {return {title: '分享标题',path: '/pages/index/index',};
    }
    

二、组件生命周期

组件生命周期是指 UniApp 中自定义组件的生命周期函数。它分为 组件创建组件显示组件销毁 等过程。

  1. created
    组件实例化时触发。
    适用于:初始化组件的状态,执行数据请求等。

    javascript

  • created() {console.log('组件创建');
    }
    
  • attached
    组件挂载到页面时触发。
    适用于:DOM 节点已渲染,适合进行操作和监听事件。

    javascript

  • attached() {console.log('组件挂载');
    }
    
  • ready
    组件渲染完成后触发。
    适用于:执行需要访问组件节点的方法,如获取元素尺寸等。

    javascript

  • ready() {console.log('组件渲染完成');
    }
    
  • moved
    组件被移动到节点树中时触发。
    适用于:处理组件位置变动时的逻辑。

    javascript

  • moved() {console.log('组件已移动');
    }
    
  • detached
    组件从页面卸载时触发。
    适用于:清理定时器、事件监听器等资源。

    javascript

  1. detached() {console.log('组件卸载');
    }
    

三、全局生命周期

UniApp 中还可以使用一些全局生命周期函数来管理应用程序的状态:

  1. onLaunch
    应用启动时触发。
    适用于:全局初始化操作、获取用户信息等。

    javascript

  • onLaunch() {console.log('应用启动');
    }
    
  • onShow
    应用每次显示时触发。
    适用于:应用从后台回到前台时进行的一些逻辑处理。

    javascript

  • onShow() {console.log('应用显示');
    }
    
  • onHide
    应用每次隐藏时触发。
    适用于:应用进入后台时,暂停相关操作等。

    javascript

  • onHide() {console.log('应用隐藏');
    }
    
  • onError
    全局错误捕获。
    适用于:捕获并处理应用运行时的错误。

    javascript

  • onError(msg) {console.log('应用发生错误:', msg);
    }
    
  • onPageNotFound
    页面不存在时触发。
    适用于:自定义 404 页面或处理页面跳转失败等。

    javascript

  1. onPageNotFound() {console.log('页面不存在');
    }
    

总结

UniApp 的生命周期函数为开发者提供了丰富的钩子,可以在不同的时间点处理相应的逻辑。页面生命周期主要包括页面加载、显示、隐藏和卸载等阶段,而组件生命周期则处理组件的创建、挂载、渲染和销毁等。合理利用这些生命周期函数,可以更高效地开发 UniApp 应用,提升应用的性能和用户体验。

相关文章:

uniapp的生命周期

在 UniApp 中,生命周期函数是指在组件(如页面、视图等)创建和销毁过程中会自动触发的一些函数。UniApp 提供了多种生命周期函数,帮助开发者在适当的时机进行相关的逻辑处理。 UniApp 的生命周期函数可以分为 页面生命周期 和 组件…...

基于 RNN(GRU, LSTM)+CNN 的红点位置检测(pytorch)

文章目录 1 项目背景2 数据集3 思路4 实验结果5 代码 1 项目背景 需要在图片精确识别三跟红线所在的位置,并输出这三个像素的位置。 其中,每跟红线占据不止一个像素,并且像素颜色也并不是饱和度和亮度极高的红黑配色,每个红线放大…...

L2G3000-LMDeploy 量化部署实践

文章目录 LMDeploy 量化部署实践闯关任务环境配置W4A16 量化 KV cacheKV cache 量化Function call LMDeploy 量化部署实践闯关任务 环境配置 conda create -n lmdeploy python3.10 -y conda activate lmdeploy conda install pytorch2.1.2 torchvision0.16.2 torchaudio2.1.…...

verilog编程规范

verilog编程规范 文章目录 verilog编程规范前言一、代码划分二、verilog编码ABCDEFG 前言 高内聚,低耦合,干净清爽的代码 一、代码划分 高内聚: 一个功能一个模块干净的接口提取公共的代码 低耦合: 模块之间低耦合尽量用少量…...

飞飞5.4游戏源码(客户端+服务端+工具完整源代码+5.3fix+5.4patch+数据库可编译进游戏)

飞飞5.4游戏源码(客户端服务端工具完整源代码5.3fix5.4patch数据库可编译进游戏) 下载地址: 通过网盘分享的文件:【源码】飞飞5.4游戏源码(客户端服务端工具完整源代码5.3fix5.4patch数据库可编译进游戏) 链…...

【MySQL】——​​用一文领悟表的增删查改

目录 前言 🍃1.表的增加 🍙1.1增——insert 🍙1.2插入否则更新 🍤1.2.1影响行说明 🍂2.表的查询 🍘2.1查询——select 🍘2.2特殊表查询 🍥2.2.1添加表达式 🍥…...

Zabbix监控Oracle 19c数据库完整配置指南

Zabbix监控Oracle 19c数据库完整配置指南 本文将详细介绍如何使用Zabbix配置Oracle 19c数据库监控,包括安装、配置、问题排查等全过程。本指南适合新手独立完成配置。 1. 环境准备 1.1 系统要求 Oracle 19c数据库服务器Zabbix服务器(版本5.0或更高&a…...

静态路由与交换机配置实验

1.建立网络拓扑 添加2台计算机,标签名为PC0、PC1;添加2台二层交换机2960,标签名为S0、S1;添加2台路由器2811,标签名为R0、R1;交换机划分的VLAN及端口根据如下拓扑图,使用直通线、DCE串口线连接…...

【jvm】讲讲jvm中的gc

目录 1. 说明2. 主要算法2.1 标记-清除算法2.2 复制算法2.3 标记-整理算法3. 主要回收器3.1 Serial GC3.2 Parallel GC3.3 CMS(Concurrent Mark-Sweep)GC3.4 G1(Garbage-First)GC 4. 触发条件4.1 Minor GC(Young GC&am…...

openlayers地图事件

OpenLayers是一个开源的JavaScript库,用于在Web上创建交互式地图。它提供了许多地图事件,使用户可以与地图进行交互。以下是OpenLayers常用的地图事件: 1. click:当用户单击地图时触发该事件。 2. dblclick:当用户双…...

杂记9---一些场景git操作汇总

背景:不同项目需求,所需要git操作集合,不太一样,这里汇总记录一下。 场景1:给本地项目添加到远程仓库的新建分支上 把本地节点保存在自己库的一个分支: git init git remote add origin xxx.git 远程仓库…...

Mysql索引,聚簇索引,非聚簇索引,回表查询

什么是索引 数据库索引是为了实现高效数据查询的一种有序的数据数据结构,类似于书的目录,通过目录可以快速的定位到想要的数据,因为一张表中的数据会有很多,如果直接去表中检索数据效率会很低,所以需要为表中的数据建立…...

【优选算法 二分查找】二分查找算法入门详解:二分查找小专题

x 的平方根 题目解析 算法原理 解法一&#xff1a; 暴力解法 如果要求一个数(x)的平方根&#xff0c;可以从 0 往后枚举&#xff0c;直到有一个数(a)&#xff0c;a^2<x&#xff0c;(a1)^2>x&#xff0c;a即为所求&#xff1b; 解法二&#xff1a;二分查找 …...

如何将CSDN博客下载为PDF文件

1.打开CSDN文章内容 2.按键盘上的f12键&#xff08;或者右键—审查元素&#xff09;进入浏览器调试模式&#xff0c;点击控制台&#xff08;Console&#xff09;进入控制台 3.在控制台输入以下代码&#xff0c;回车 4.在弹出的打印页面中将布局设置成横向&#xff0c;纵向会…...

pdf转word/markdown等格式——MinerU的部署:2024最新的智能数据提取工具

一、简介 MinerU是开源、高质量的数据提取工具&#xff0c;支持多源数据、深度挖掘、自定义规则、快速提取等。含数据采集、处理、存储模块及用户界面&#xff0c;适用于学术、商业、金融、法律等多领域&#xff0c;提高数据获取效率。一站式、开源、高质量的数据提取工具&…...

2024年下半年网络工程师案例分析真题及答案解析

2024年下半年网络工程师案例分析真题及答案解析 试题一(15分) [说明] 公司为某科技园区的不同企业提供网络服务,不同企业的业务有所不同,每个企业因业务需要在不同的地点有多个分支机构。其拓扑结构如图1所示。企业用户通过楼层接入交换机、楼栋汇聚交换机和区域交换机接…...

English phonetic symbol

英语音标发音表-英语48个音标在线读 (jiwake.com) 【英语音标教程】从此学会国际音标|英式音标|BBC音标教程全解_哔哩哔哩_bilibili 元音 单元音 /iː/,/ɪ/ 这两个音不是发音长短的区别&#xff0c; /uː/ /ʊ/ 上面那个就正常读&#xff0c;下面那个她的气大概是往你斜…...

普及组集训--图论最短路径设分层图

P4568 [JLOI2011] 飞行路线 - 洛谷 | 计算机科学教育新生态 可以设置分层图&#xff1a;(伪代码&#xff09; E(u,v)w;无向图 add(u,v,w),add(v,u,w); for(j1~k){add(ujn,vjn,w);add(vjn,ujn,w);add(ujn-j,vjn-j,0);add(vjn-j,ujn-j,0); } add(ujn-j,vjn-j,0); add(vjn-j,uj…...

SYN6288语音合成模块使用说明(MicroPython、STM32、Arduino)

模块介绍 SYN6288中文语音合成模块是北京宇音天下科技有限公司推出的语音合成模块。该模块通过串口接收主控传来的语音编码后&#xff0c;可自动进行自然流畅的中文语音播报。 注&#xff1a;SYN6288模块无法播报英文单词和句子&#xff0c;只能按字母播报英文 &#xff1b;而…...

Spring完整知识三(完结)

Spring集成MyBatis 注意 Spring注解形式集成MyBatis时&#xff0c;若SQL语句比较复杂则仍采用映射文件形式书写SQL语句&#xff1b;反之则用注解形式书写SQL语句&#xff0c;具体可详见Spring注解形式 环境准备相同步骤 Step1&#xff1a; 导入相关坐标&#xff0c;完整pom.…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

破解路内监管盲区:免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率:以冒泡排序为例

目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码&#xff1a;冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...