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、单继承…

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…

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

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

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

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

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

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

运输问题的中转或者转运问题

1、这类问题,不好理解,做个笔记,记录一下。 2、可以参考一下: https://blog.csdn.net/YUNCHOUSHUO/article/details/121660675?spm1001.2014.3001.5506 这个csdn写的还是不错的,推荐。 或者,可以参考 …

网络安全学习路线-超详细

零基础小白,到就业!入门到入土的网安学习路线! 在各大平台搜的网安学习路线都太粗略了。。。。看不下去了! 建议的学习顺序: 一、网络安全学习普法(心里有个数,要进去坐几年!&#x…

OpenAI宣布GPT-4-Turbo全面升级,GPT-4 Turbo 新增视觉理解能力,可同时处理文本和图像信息

OpenAI宣布GPT-4-Turbo全面升级,GPT-4 Turbo with Vision新增视觉理解能力,可同时处理文本和图像信息,极大简化了开发流程。 OpenAI宣布GPT-4 Turbo全面升级!根据官方说法,这一波 GPT 的升级包括: 更长的上…

VSCode安装配置使用教程(最新版超详细保姆级含插件)一文就够了

前言 Visual Studio Code 是一个轻量级功能强大的源代码编辑器,支持语法高亮、代码自动补全(又称 IntelliSense)、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。适用于 Windows、macOS 和 Linux。它内置了对…

Open3D 体素滤波(30)

Open3D 体素滤波(30) 一、算法介绍二、算法实现1.代码2.效果一、算法介绍 体素滤波(Voxel Grid Filtering)是一种常用的点云滤波算法,用于对点云数据进行下采样(降低数据密度)以及去除噪声。该算法将点云数据划分为规则的体素网格,然后在每个体素中选择一个代表性点作为…

17.牛客---栈的压入弹出(Java版)

题目链接: https://www.nowcoder.com/practice/d77d11405cc7470d82554cb392585106?tpId13&tqId11174&ru/exam/oj 题解: 代码: 测试: 注意 判断栈是否为空必须在前!不然会空指针异常

用于可观察性的 Elastic AI 助手摆脱了 Kibana!

作者:Jeff Vestal 通过 Elastic AI Assistant for Observability API 将 AI 支持的可观察性引入你的日常工具。 注意:下面描述的 API 目前正在开发中,并且没有文档记录,因此不受支持。请将其视为展望性博客。不能保证功能会发布。…