uni-app中页面生命周期与vue生命周期的执行顺序对比

应用生命周期

uni-app 支持如下应用生命周期函数:

函数名说明平台兼容
onLaunchuni-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+

页面生命周期

生命周期钩子描述H5App端小程序说明
beforeCreate在实例初始化之后被调用 详情
created在实例创建完成后被立即调用 详情
beforeMount在挂载开始之前被调用 详情
mounted挂载到实例上去之后调用 详情 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTick 详情
beforeUpdate数据更新时调用,发生在虚拟 DOM 打补丁之前 详情
updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子 详情
activated被 keep-alive 缓存的组件激活时调用 详情x
deactivated被 keep-alive 缓存的组件停用时调用 详情x
beforeDestroy实例销毁之前调用。在这一步,实例仍然完全可用 详情
destroyedVue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁 详情
errorCaptured当捕获一个来自子孙组件的错误时被调用 详情-

组件生命周期

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

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

页面加载时序介绍

接下来我们介绍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渲染的速度。


执行顺序

1.beforeCreate
2.created
3.onLoad
4.onShow
5.beforeMount
6.onReady
7.mounted
8.beforeUpdate
9.updated
10.返回上一页时,会执行onUnLoad,并未有执行destroyed,并未执行onHide
11进入下一页时,会执行onHide

这四个的执行顺序是

created>onLoad>onShow>mounted

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

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

相关文章

Python零基础从小白打怪升级中~~~~~~~Python面向对象(二)

第九节:Python面向对象——继承和多继承 一、继承 Python面向对象的继承指的是多个类之间的所属关系,即子类默认继承父类的所有属性和函数。 在Python中,所有类默认继承object类,object类是顶级类或基类; 1、单继承…

Node.js安装与配置:构建强大的JavaScript后端应用程序

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境,它使得我们可以使用JavaScript构建高性能的后端应用程序。无论你是初学者还是有经验的开发者,了解如何正确安装和配置Node.js都是非常重要的。本文将介绍如何安装和配置Node.js,以及一…

Linux - 线程

目录 一.Linux线程的概念 1.1什么是线程 1.2 线程的优点 1.3 线程的缺点 1.4 线程异常 1.5 线程用途 二. Linux进程VS线程 2.1 进程和线程 三. Linux线程控制 3.1 POSIX线程库 3.2 创建线程 3.3 进程ID和线程ID 3.4 线程ID及进程地址空间布局 3.5 线程终止 3.6 线…

实战小项目 | ESP32-S3和ESP32-C3通过ESP-Mesh-Lite组网 温湿度传感器案例

传统Wi-Fi网络所有终端设备都需要直接与路由器相连,这使得Wi-Fi的覆盖区域受到路由器位置的限制,可接入终端设备的数量也受到路由器容量的限制。而乐鑫ESP-Mesh-Lite Wi-Fi组网方案,所有终端设备都可以与相邻设备连接,摆脱了对路由…

移动硬盘盒支持PD充电:优势解析与实际应用探讨

随着科技的飞速发展,数据存储和传输的需求日益增长,移动硬盘盒作为便携式存储设备的重要载体,其功能和性能也在不断提升。近年来,越来越多的移动硬盘盒开始支持PD(Power Delivery)充电技术,这一…

9.Hexo通过partial文件传值和改变CSS属性

partials 基本上是可以在自己的HTML文件或.ejs文件中定义网站中不同组件的方法 如果想要为网站定义一个标头,这个标头将会很好地出现在网站的每个页面上 用partials可以创建一个.ejs文件,可以将该标头的所有代码存储在该文件中,然后当想要在…

记一次奇妙的某个edu渗透测试

前话: 对登录方法的轻视造成一系列的漏洞出现,对接口确实鉴权造成大量的信息泄露。从小程序到web端网址的奇妙的测试就此开始。(文章厚码,请见谅) 1. 寻找到目标站点的小程序 进入登录发现只需要姓名加学工号就能成功…

BIT-6-C语言文件操作(C语言进阶)

本章重点 为什么使用文件什么是文件文件的打开和关闭文件的顺序读写文件的随机读写文本文件和二进制文件文件读取结束的判定 文件缓冲区 1. 为什么使用文件 我们前面学习结构体时,写了通讯录的程序,当通讯录运行起来的时候,可以给通讯录中增…

程序员应该遵守的 10 个编程原则

程序员应该遵守的编程原则 程序员拥有一个较好的编程原则能使他的编程能力有大幅的提升,可以使其开发出维护性高、缺陷更少的代码。以下内容梳理自StactOverflow的一个问题:编程时你最先考虑的准则是什么? 目录 Toggle KISS(Keep …

PaddleOCR训练自己模型(2)----参数配置及训练

一、介绍 paddleocr分为文字定位(Det)和文字识别(Rec)两个部分 二、定位模型训练 (1)Det预训练模型下载:https://paddleocr.bj.bcebos.com/PP-OCRv4/chinese/ch_PP-OCRv4_det_train.tar (2)下载完之后,…

基于zookeeper安装Kafka集群

操作系统:centOS 9 Stream,6台,基于vmware虚拟机创建 准备工作 确认系统环境: 确保所有服务器已安装了最新更新。安装Java Development Kit (JDK) 8或更高版本,因为ZooKeeper和Kafka都是基于Java开发的。例如&#x…

如何解决集群部署环境下 Session 不共享的问题

在集群部署环境中,Session 不共享的问题通常是因为HTTP协议本身是无状态的,服务器之间无法自动传递和同步用户会话信息。当用户从集群中的一个节点跳转到另一个节点时,原先节点上的Session数据无法在新的节点上获取,从而导致登录状…

mac dex2jar安装

如果你在终端中收到 “zsh: command not found: dex2jar” 的消息,这意味着 dex2jar 工具没有安装在你的系统中,或者没有被添加到系统的 PATH 环境变量中。为了解决这个问题,你需要按照以下步骤操作: 下载 dex2jar: 前…

【探索人工智能】我与讯飞星火认知大模型的对话

文章目录 讯飞星火认知大模型的地址概要讯飞星火认知大模型的发展历程讯飞星火认知大模型的主页利用讯飞星火大模型解决一些基本的数学问题讯飞星火认知大模型与OpenAI,ChatGPT没有关系!让讯飞星火认知大模型编写传奇代码hello world小结 讯飞星火认知大模型的地址 …

文献速递:深度学习胰腺癌诊断--胰腺癌在CT扫描中通过深度学习检测:一项全国性的基于人群的研究

Title 题目 Pancreatic Cancer Detection on CT Scans with Deep Learning: A Nationwide Population-based Study 胰腺癌在CT扫描中通过深度学习检测:一项全国性的基于人群的研究 01 文献速递介绍 胰腺癌(PC)的五年生存率是所有癌症中…

C语言数组相关练习题

1. 求数组中第二大的值 #include <stdio.h>int main() {int arr[] {12, 97, 1, 5};int len sizeof(arr) / sizeof(arr[0]);// printf("%d\n",len); // 9// 冒泡排序(从小到大)for (int i 0; i < len; i){for (int j 0; j < len - i - 1; j){// prin…

今天你卷了吗?

什么是卷&#xff1f; 高考的地狱模式是卷。100个人录取30个。再怎么努力也只有30个。反过来大家如果都不努力也录取30个。 日常加量不加价的工作是卷。互联网公司就是1个人拿2个人的薪酬做3个人的事情。但是非互联网公司&#xff0c;一个人做2个人的事情还是3个人的事情拿的…

transformer上手(8)—— 序列标注任务

序列标注 (Sequence Labeling/Tagging)&#xff0c;其目标是为文本中的每一个 token 分配一个标签&#xff0c;因此 Transformers 库也将其称为 token 分类任务。常见的序列标注任务有命名实体识别 NER (Named Entity Recognition) 和词性标注 POS (Part-Of-Speech tagging)。 …

FianlShell搭建vulhub

下载docker-ce的yum源 sudo wget -O /etc/yum.repos.d/docker-ce.repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 安装Docker sudo yum -y install docker-ce 检查Docker是否安装成功 sudo docker -v 安装docker-compose 安装工具源 sudo yum…

【蓝桥杯嵌入式】串口通信与RTC时钟

【蓝桥杯嵌入式】串口通信与RTC时钟 串口通信cubemx配置串口通信程序设计 RTC时钟cubemx配置程序设计 串口通信 cubemx配置 打开串口通信&#xff0c;并配置波特率为9600 打开串口中断 重定义串口接收与发送引脚&#xff0c;默认是PC4&#xff0c;PC5&#xff0c;需要改为P…