UniApp 应用、页面与组件的生命周期详解

news2024/11/14 4:49:45

UniApp 应用、页面与组件的生命周期详解

uni-app中包含了 应用生命周期、页面生命周期、和组件生命周期( Vue.js的)函数。

应用生命周期

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

<script>
	export default {
		onLaunch: function() {
			console.log('onLaunch:应用初始化完成,全局触发一次');
		},
		onShow: function() {
			console.log('onShow:应用从后台进入前台,多次');
		},
		onHide: function() {
			console.log('onHide:应用从前台进入后台,多次');
		},
		onError:function(err){
			console.log('onError:监听页面异常', err);
		}
	}
</script>

UniApp 应用、页面与组件的生命周期详解
应用从前台进入后台UniApp 应用、页面与组件的生命周期详解
报错监听:

	<button type="button" @click="clickHandler">点击报错</button>
	clickHandler(){
		const i = 1;
		i = 10;
	}

效果,常量不能改变值,会报错,相应的会监听到:
UniApp 应用、页面与组件的生命周期详解

页面生命周期

uniapppages.json中配置的页面才有一下页面生命周期函数,子组件中没有这些函数

  • onLoad:监听页面加载,其参数为上个页面传递的数据,参数类型为Object用于页面传参。
  • onShow:监听页面显示,页面每次出现在屏幕上都会触发,包括从下级页面返回露出当前页面。
  • onReady:监听页面初次渲染完成,注意,如果渲染速度加快,会在页面进入动画前完成出发。
  • onHide:监听页面隐藏。
    -onUnload:页面卸载函数,当前页面从内存中关闭显示。
    -onResize:当窗口屏幕变化,横屏竖屏的时候。
onLoad() {
		console.log("监听页面加载,一般用于初始化页面数据,进入页面时调用一次")
},	
onShow() {
	console.log("监听页面显示,页面出现在屏幕上就会被触发")
},
onReady() {
	console.log("监听页面出事渲染完成")
},
onHide() {
	console.log("页面隐藏")
},

效果:
UniApp 应用、页面与组件的生命周期详解
通过uni.reLaunch()进行跳转,并且关闭内存中的所有页面

onUnload(){
	console.log("页面卸载")
},

UniApp 应用、页面与组件的生命周期详解
窗口横屏监听函数:

onResize() {
	console.log("窗口已变化")
},

组件生命周期

uniapp组件支持的生命周期,与vue标准生命周期相同,这里没有页面级的onLoad等生命周期,一般在子组件使用,当然页面中也可以使用的。

  • beforeCreate:在实例初始化之后被调用。
  • created:在实例创建完成后被立即调用。
  • beforeMount:在挂在开始之前被调用。
  • mounted:挂在到实例上去之后调用,并不能确定子组件被全部挂在,如果需要子组件完全挂载之后在执行操作可以使用$nextTick
  • beforeUpdate:数据更新时调用,发生在虚拟DOM不定之前。
  • updated由于数据更改导致虚拟DOM重新渲染和打补丁,在这时候会调用该钩子。
  • beforeDestroy:实例销毁之前调用,到了这个生命周期时候,实例完全可以使用。
  • destroyedvue实例销毁后调用,调用后,vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

总结:

只要是 vue.nvue就可以使用组件生命周期函数,但是页面生命周期函数只能在pages选项中注册了作为页面时才可以使用。应用生命周期函数只能在App.vue文件中使用。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Optimism掀起发链热潮,还有哪些发链 平台值得关注?

继电子巨头索尼在OP上发布L2 Soneium之后&#xff0c;10月29日&#xff0c;再质押协议巨头Swell宣布迁移至Optimism超级链&#xff0c;通过OP Stack构建Rollup加入OP生态系统。据DeFilama数据显示&#xff0c;Swell的TVL最高曾超过30亿美元&#xff0c;目前为13.4亿美元&#x…

0. 0:《跟着小王学Python·新手》

《跟着小王学Python新手》系列 《跟着小王学Python》 是一套精心设计的Python学习教程&#xff0c;适合各个层次的学习者。本教程从基础语法入手&#xff0c;逐步深入到高级应用&#xff0c;以实例驱动的方式&#xff0c;帮助学习者逐步掌握Python的核心概念。通过开发游戏、构…

如何优化Kafka消费者的性能

要优化 Kafka 消费者性能&#xff0c;你可以考虑以下策略&#xff1a; 并行消费&#xff1a;通过增加消费者组中的消费者数量来并行处理更多的消息&#xff0c;从而提升消费速度。 批量消费&#xff1a;配置 fetch.min.bytes 和 fetch.max.wait.ms 参数来控制批量消费的大小和…

Golang | Leetcode Golang题解之第556题下一个更大元素III

题目&#xff1a; 题解&#xff1a; func nextGreaterElement(n int) int {x, cnt : n, 1for ; x > 10 && x/10%10 > x%10; x / 10 {cnt}x / 10if x 0 {return -1}targetDigit : x % 10x2, cnt2 : n, 0for ; x2%10 < targetDigit; x2 / 10 {cnt2}x x2%10 -…

AscendC从入门到精通系列(一)初步感知AscendC

1 什么是AscendC Ascend C是CANN针对算子开发场景推出的编程语言&#xff0c;原生支持C和C标准规范&#xff0c;兼具开发效率和运行性能。基于Ascend C编写的算子程序&#xff0c;通过编译器编译和运行时调度&#xff0c;运行在昇腾AI处理器上。使用Ascend C&#xff0c;开发者…

unity基础,点乘叉乘。

简单记录下点乘叉乘&#xff0c;要不每次用完就忘&#xff0c;忘了又查。 using System.Collections; using System.Collections.Generic; using UnityEngine;public class TestCrossDot : MonoBehaviour {/// <summary>/// 原点/// </summary>public Transform t…

AI写作(二)NLP:开启自然语言处理的奇妙之旅(2/10)

一、NLP 的基本概念与任务 &#xff08;一&#xff09;自然语言处理的研究对象 自然语言处理&#xff08;NLP&#xff09;处于计算机科学、人工智能和语言学的交叉领域。它所聚焦的人类社会语言信息是无比丰富和复杂的&#xff0c;包括口语、书面语等各种形式。这种语言信息在…

Windows 局域网IP扫描工具:IPScaner 轻量免安装

IPScaner是一款258KB的工具&#xff0c;具备快捷修改IP、批量扫描、地址计算等功能&#xff0c;自动识别本机IP网段&#xff0c;快速查看IP使用情况&#xff0c;适用于监控维护、企业IT运维等场 软件功能介绍&#xff1a; 1&#xff09;快捷修改本地IP、IP批量扫描、IP地址计算…

【3D Slicer】的小白入门使用指南二

3D Slicer中DICOM数据加载和三维可视化 任务 数据集下载和解压缩 加载和查看DICOM数据 1)将第一个数据集文件夹,整个往3Dslicer左侧拖动即可 得到 2)选中右侧patient 1就可显示出该患者的基本信息 (第二行蓝色是研究信息;第三行蓝色是序列信息)

在移动硬盘中创建vue项目 报错

如图所示&#xff0c;在U盘或者移动硬盘当中 创建vue项目&#xff0c;报错 如图所示&#xff0c; 这个问题与 Git 的安全设置有关&#xff0c;尤其是在跨用户或跨文件系统的环境下&#xff08;例如&#xff0c;移动硬盘或不同账户&#xff09;。Git 检测到当前项目的文件夹 的…

qt QDockWidget详解

1、概述 QDockWidget是Qt框架中的一个窗口部件&#xff0c;它提供了一个可停靠的面板&#xff0c;该面板可用于显示和编辑各种内容。QDockWidget可以在主窗口中创建并停靠在不同的位置&#xff0c;如左侧、右侧、顶部或底部。此外&#xff0c;QDockWidget还具备浮动功能&#…

Android 开发指南:初学者入门

Android 是全球最受欢迎的移动操作系统之一&#xff0c;为开发者提供了丰富的工具和资源来创建各种类型的应用程序。本文将为你提供一个全面的入门指南&#xff0c;帮助你从零开始学习 Android 开发。 目录 1. 了解 Android 平台[1]2. 设置开发环境[2]3. 学习基础知识[3]4. 创…

每日小练:Day2

1.乒乓球筐 题目链接&#xff1a;乒乓球筐__牛客网 题目描述&#xff1a; 这道题主要考察B盒是不是A盒的子集&#xff0c;我们可以通过哈希表来做 单哈希表 import java.util.Scanner;// 注意类名必须为 Main, 不要有任何 package xxx 信息 public class Main {public stat…

Java反序列化之CommonsCollections4、5、7 链的学习

一、前言 前面的文章中&#xff0c;基本把CC链的关键部分学习的差不多了&#xff0c;利用过程也是比较清晰了&#xff0c;接下来把 CommonsCollections 4、5、7 利用链学习下&#xff0c;扩展下思路 二、CommonsCollections4 利用链的学习 运行环境&#xff1a; java 1.8.0_71…

A030-基于Spring boot的公司资产网站设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…

qt QVideoWidget详解

1. 概述 QVideoWidget是Qt框架中用于视频播放的控件。它继承自QWidget&#xff0c;并提供了与QMediaPlayer等多媒体播放类集成的功能。QVideoWidget可以嵌入到Qt应用程序的用户界面中&#xff0c;用于显示视频内容。它支持多种视频格式&#xff0c;并提供了基本的视频播放控制…

PG逻辑复制的REPLICA IDENTITY几种设置

前两天同事问了一个PG的错误&#xff0c;创建一张普通表&#xff0c;insert插入正常&#xff0c;但是执行update和delete时&#xff0c;提示这个错误&#xff0c; 代码语言&#xff1a;javascript 复制 SQL 错误 [55000]: ERROR: cannot delete from table "temp_tb&qu…

Flutter 小技巧之 Shader 实现酷炫的粒子动画

在之前的《不一样的思路实现炫酷 3D 翻页折叠动画》我们其实介绍过&#xff1a;如何使用 Shader 去实现一个 3D 的翻页效果&#xff0c;具体就是使用 Flutter 在 3.7 开始提供 Fragment Shader API &#xff0c;因为每个像素都会过 Fragment Shader &#xff0c;所以我们可以通…

<项目代码>YOLOv7 草莓叶片病害识别<目标检测>

YOLOv7是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv7具有更高的…

一文读懂什么是RAG?附MindSpore和MindNLP实现的TinyRAG框架

什么是RAG&#xff1f; 首先我们给出RAG的定义&#xff1a;RAG&#xff08;Retrieval-Augmented Generation&#xff09;技术是一种结合了信息检索&#xff08;Retrieval&#xff09;和生成式模型&#xff08;Generation&#xff09;的人工智能方法。对于用户的Query&#xff…