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.hqwc.cn/news/625481.html

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

相关文章

Linux LVM与磁盘配额

目录 一.LVM概述 LVM LVM机制的基本概念 PV(Physical Volume,物理卷) VG(Volume Group,卷组) LV(Logical Volume,逻辑卷) 二.LVM 的管理命令 三.创建并使用LVM …

【HCIP学习】OSPF协议基础

一、OSPF基础 1、技术背景(RIP中存在的问题) RIP中存在最大跳数为15的限制,不能适应大规模组网 周期性发送全部路由信息,占用大量的带宽资源 路由收敛速度慢 以跳数作为度量值 存在路由环路可能性 每隔30秒更新 2、OSPF协议…

锂电池充放电管理-单片机通用

锂电池充放电管理-单片机通用 一、锂电池充放电检测的原理二、power.c的实现三、power.h的实现四、锂电池检测和充电电路 一、锂电池充放电检测的原理 ①两节锂电池通过电阻分压检测ADC,再根据电压划分电量等级;②充电使用的是锂电池充电IC方案&#xf…

I2C通信的详细讲解

物理接口: SCL SDA (1)SCL(serial clock):时钟线,传输CLK信号,一般是I2C主设备向从设备提供时钟的通道。 (2)SDA(serial data):数据…

编程入门(二)【计算机基础二】

读者大大们好呀!!!☀️☀️☀️ 🔥 欢迎来到我的博客 👀期待大大的关注哦❗️❗️❗️ 🚀欢迎收看我的主页文章➡️寻至善的主页 文章目录 前言三、数制的转换四、计算机信息的存储单位总结 前言 本系列(分…

MongoDB的CURD(增删改查操作)

读者大大们好呀!!!☀️☀️☀️ 🔥 欢迎来到我的博客 👀期待大大的关注哦❗️❗️❗️ 🚀欢迎收看我的主页文章➡️寻至善的主页 ✈️如果喜欢这篇文章的话 🙏大大们可以动动发财的小手👉&#…

【Day 2】JavaScript、Vue

1 引入方式 内部脚本 --- 将 JS 代码定义在 HTML 页面中 <script>alert("Hello javaScript") </script> JavaScript 代码必须位于 <script></s cript> 标签之间&#xff08;而不能自闭合&#xff09; 在 HTML 文档中&#xff0c;可以在任…

浅析Redis④:字典dict实现

什么是dict&#xff1f; 在 Redis 中&#xff0c;dict 是指哈希表&#xff08;hash table&#xff09;的一种实现&#xff0c;用于存储键值对数据。dict 是 Redis 中非常常用的数据结构之一&#xff0c;用于实现 Redis 的键空间。 在 Redis 源码中&#xff0c;dict 是一个通用…

交通部 JT/T 808(809 1076 1078 )车辆卫星定位系统 通信协议介绍

1 行业标准协议 1.1 官方网站 交通运输标准化信息系统 (mot.gov.cn) 附上官方下载地址&#xff1a; JT/T 808-2019 道路运输车辆卫星定位系统 终端通信协议及数据格式 JT/T 809-2019 道路运输车辆卫星定位系统 平台数据交换 JT/T 1076-2016 道路运输车辆卫星定位系统 车…

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之十三 简单去除图片水印效果

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之十三 简单去除图片水印效果 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之十三 简单去除图片水印效果 一、简单介绍 二、简单去除图片水印效果实现原理 三、简单去除图片水印效果案例…

MySQL与Redis缓存一致性的实现与挑战

缓存是提高应用性能的重要手段之一&#xff0c;而 MySQL 和 Redis 是两种常用的数据存储和缓存技术。在许多应用中&#xff0c;常常将 Redis 用作缓存层&#xff0c;以加速对数据的访问。然而&#xff0c;在使用 MySQL 和 Redis 组合时&#xff0c;保持缓存与数据库之间的一致性…

RAID 磁盘阵列及RAID配置实战

目录 一.RAID磁盘阵列介绍 二.常用的RAID磁盘阵列的介绍 1.RAID 0 &#xff08;条带化存储&#xff09; 2.RAID 1&#xff08;镜像存储&#xff09; 3.RAID 5 4.RAID 6 5.RAID 10&#xff08;先做镜像&#xff0c;再做条带&#xff09; 6.RAID 01 &#xff08;先做条带…