uni-app生命周期

uni-app的生命周期包括:应用生命周期、页面生命周期、组件生命周期

一、应用生命周期(只能在App.vue文件中监听)

函数说明
onLaunch初始化完成时触发(全局只触发一次)
onShow启动时或从后台进入前台显示
onHide从前台进入后台
onError报错时触发
onPageNotFound页面不存在监听函数

在App.vue文件中打印

<script>export default {onLaunch: function() {console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}}
</script>

在控制台输出可以看到执行顺序
在这里插入图片描述

二、页面声明周期

函数说明
onLoad监听页面加载,其参数为上个页面传递的数据,参数类型为 Object
onShow监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady监听页面初次渲染完成
onHide监听页面隐藏
onUnload监听页面卸载
onResize监听窗口尺寸变化
onPullDownRefresh监听用户下拉动作,一般用于下拉刷新
onReachBottom页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体官方文档注意事项
onPageScroll监听页面滚动,参数为Object
onShareAppMessage用户点击右上角分享
onShareTimeline监听用户点击右上角转发到朋友圈
onAddToFavorites监听用户点击右上角收藏

更多页面生命周期细节,详见官方文档

在page页面中打印
在这里插入图片描述
在控制台输出可以看到执行顺序

在这里插入图片描述

三、组件生命周期(同Vue组件生命周期)

函数说明
beforeCreate实例初始化之前调用
created创建完成后立即调用
beforeMount挂载前调用
mounted挂载后调用
beforeUpdate数据更新时调用
updated数据更新重新渲染
beforeDestroy实例销毁之前调用
destroyed实例销毁之后调用

H5和微信小程序的生命周期函数调用顺序不一致

H5

page beforeCreate
page onLoad
page onShow
page created
page beforeMountcomponent beforeCreate
component created
component beforeMount
component mountedpage onReady
page mounted

微信小程序

page beforeCreate
page created
page beforeMountcomponent beforeCreate
component created
component beforeMountpage onLoad
page onShowcomponent mountedpage mounted
page onReady

一般情况下,主要使用的周期函数如下,他们的执行顺序是固定的

page onLoadcomponent mountedpage mounted

测试代码

页面

<template><view class="page-container"><TestComponent></TestComponent></view>
</template><script lang="ts">
// @ts-nocheck
import Vue from 'vue'
import type { PropType } from 'vue'
import TestComponent from './components/TestComponent.vue'export default Vue.extend({components: {TestComponent,},props: {},data() {return {}},// 监听页面初始化,其参数同 onLoad 参数,为上个页面传递的数据,参数类型为 Object(用于页面传参),触发时机早于 onLoadonInit() {console.log('page onInit')},// 监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参)onLoad() {console.log('page onLoad')},// 监听页面卸载onUnload() {console.log('page onUnload')},// 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面onShow() {console.log('page onShow')},// 监听页面隐藏onHide() {console.log('page onHide')},// 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发onReady() {console.log('page onReady')},// 监听窗口尺寸变化onResize() {console.log('page onResize')},// 监听用户下拉动作,一般用于下拉刷新onPullDownRefresh() {console.log('page onPullDownRefresh')},// 页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项onReachBottom() {console.log('page onReachBottom')},// 用户点击右上角分享onTabItemTap() {console.log('page onTabItemTap')},// 用户点击右上角分享onShareAppMessage() {console.log('page onShareAppMessage')},// 监听页面滚动,参数为ObjectonPageScroll() {console.log('page onPageScroll')},// 监听原生标题栏按钮点击事件,参数为ObjectonNavigationBarButtonTap() {console.log('page onNavigationBarButtonTap')},// 监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;onBackPress() {console.log('page onBackPress')},// 监听原生标题栏搜索输入框输入内容变化事件onNavigationBarSearchInputChanged() {console.log('page onNavigationBarSearchInputChanged')},// 监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。onNavigationBarSearchInputConfirmed() {console.log('page onNavigationBarSearchInputConfirmed')},// 监听原生标题栏搜索输入框点击事件(pages.json 中的 searchInput 配置 disabled 为 true 时才会触发)onNavigationBarSearchInputClicked() {console.log('page onNavigationBarSearchInputClicked')},// 监听用户点击右上角转发到朋友圈onShareTimeline() {console.log('page onShareTimeline')},// 监听用户点击右上角收藏onAddToFavorites() {console.log('page onAddToFavorites')},// 在实例初始化之前被调用beforeCreate() {console.log('page beforeCreate')},// 在实例创建完成后被立即调用created() {console.log('page created')},// 在挂载开始之前被调用beforeMount() {console.log('page beforeMount')},// 挂载到实例上去之后调用注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档mounted() {console.log('page mounted')},// 数据更新时调用,发生在虚拟 DOM 打补丁之前。详见  仅H5平台支持beforeUpdate() {console.log('page beforeUpdate')},// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见  仅H5平台支持updated() {console.log('page updated')},// 实例销毁之前调用。在这一步,实例仍然完全可用。详见beforeDestroy() {console.log('page beforeDestroy')},// Vue 实例销毁后调用。调用后,Vue  实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。destroyed() {console.log('page destroyed')},methods: {},
})
</script><style></style>

组件 components/TestComponent.vue

<template><view class="component-container">component</view>
</template><script lang="ts">
// @ts-nocheck
import Vue from 'vue'
import type { PropType } from 'vue'export default Vue.extend({components: {},props: {},data() {return {}},// 在实例初始化之前被调用beforeCreate() {console.log('component beforeCreate')},// 在实例创建完成后被立即调用created() {console.log('component created')},// 在挂载开始之前被调用beforeMount() {console.log('component beforeMount')},// 挂载到实例上去之后调用注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档mounted() {console.log('component mounted')},// 数据更新时调用,发生在虚拟 DOM 打补丁之前。详见  仅H5平台支持beforeUpdate() {console.log('component beforeUpdate')},// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见  仅H5平台支持updated() {console.log('component updated')},// 实例销毁之前调用。在这一步,实例仍然完全可用。详见beforeDestroy() {console.log('component beforeDestroy')},// Vue 实例销毁后调用。调用后,Vue  实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。destroyed() {console.log('component destroyed')},methods: {},
})
</script><style></style>

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

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

相关文章

Django实战项目-学习任务系统-用户注册

接着上期代码框架&#xff0c;开发第2个功能&#xff0c;用户注册&#xff0c;在原有用户模型基础上&#xff0c;增加一个学生用户属性表&#xff0c;用来关联学生用户的各种属性值&#xff0c;这个属性表是参考网络小说里系统属性值设计的&#xff0c;方便直观了解用户的能力高…

如何使用摩尔信使MThings连接网络设备

帽子&#xff1a; 摩尔信使MThings支持Modbus-TCP、Modbus-RTU Over TCP、Modbus-TCP Over UDP、Modbus-RTU Over UDP。 TCP链接中&#xff0c;摩尔信使MThings支持灵活的连接方式&#xff0c;主机可作为客户端也可以作为服务端&#xff0c;同时支持模拟从机以客户端方式向远…

新媒体达人投放技巧有哪些,投放总结!

达人投放&#xff0c;一个当今时代品牌传播跳不开的词。关于达人投放的优势与特点&#xff0c;相信所有人都已经不在陌生。但是真的进行达人投放时&#xff0c;又该如何实施&#xff0c;今天来分享下新媒体达人投放技巧有哪些&#xff0c;投放总结&#xff01; 一、品牌不同阶段…

C语言,输出最长连号的个数

数据范围&#xff1a;0 < n <10000. 最长连号&#xff0c;就是一组数字里面出现的连续的数字的最长长度。这里的连号最长是2 3 4 5 6&#xff0c;个数为5。 要实现求连号的个数&#xff0c;就要创建一个变量&#xff0c;用来专门计算连号的个数。在不满足连号时&#xf…

【超分】A Benchmark for Chinese-English Scene Text Image Super-resolution

中英文场景文本图像超分辨率的基准 摘要&#xff1a;场景文本图像超分&#xff08;STISR&#xff0c;Scene Text Image Super-resolution&#xff09;就是将低分辨率图像恢复为具有令人愉快的视觉和可读的文本内容。现有工作都是处理笔画简单的英文字符而不是复杂的中文字符。…

安科瑞ARB5系列弧光保护装置,智能电弧光保护,保障用电安全

安科瑞虞佳豪壹捌柒陆壹伍玖玖零玖叁 什么是弧光 电弧是放电过程中发生的一种现象&#xff0c;当两点之间的电压超过其工频绝缘强度极限时就会发生。当适当的条件出现时&#xff0c;一个携带着电流的等离子产生&#xff0c;直到电源侧的保护设备断开才会消失。空气在通常条件…

slamplay:用C++实现的SLAM工具集

0. 项目简介 slamplay 是一个功能强大的工具集合&#xff0c;可用于开始使用 C 来玩和试验 SLAM。这是一项正在进行的工作。它在单个 cmake 框架中安装并提供一些最重要的功能 后端框架&#xff08;g2o、gtsam、ceres、se-sync 等&#xff09;、 前端工具&#xff08;opencv、…

Python教程——配置环境,再探IDE

文章目录 一、Python安装下载安装验证 二、第一个Python程序常见问题 三、Python解释器四、PyCharm工具安装和配置安装使用PyCharm基本使用 一、Python安装 下载 如果我们想要使用Python语言编写程序&#xff0c;我们必须下载Python安装包并配置Python环境&#xff0c;我们现…

Apache Ranger:(一)安装部署

1.Ranger简介 Apache Ranger提供一个集中式安全管理框架, 并解决授权和审计。它可以对Hadoop生态的组件如HDFS、Yarn、Hive、Hbase等进行细粒度的数据访问控制。通过操作Ranger控制台,管理员可以轻松的通过配置策略来控制用户访问权限。 说白了就是管理大多数框架的授权问题。 …

arcgis地形分析全流程

主要内容&#xff1a;DEM的获取与处理、高程分析、坡度分析、坡向分析、地形起伏度分析、地表粗糙度分析、地表曲率分析&#xff1b; 主要工具&#xff1a;镶嵌至新栅格、按掩膜提取、投影栅格、坡度、坡向、焦点统计 一 DEM的获取与处理 1.1 DEM是什么&#xff1f; DEM(D…

ceph版本和Ceph的CSI驱动程序

ceph版本和Ceph的CSI驱动程序 ceph查看ceph版本Ceph的CSI驱动程序 ceph ceph版本和Ceph的CSI驱动程序 查看ceph版本 官网ceph-releases-index Ceph的CSI驱动程序 Ceph的CSI驱动程序 https://github.com/ceph/ceph-csi

F. Vasilije Loves Number Theory

Problem - F - Codeforces 思路&#xff1a;分析一下题意&#xff0c;对于第一种操作来说&#xff0c;每次乘以x&#xff0c;那么nn*x&#xff0c;然后问是否存在一个a使得gcd(n,a)1并且n*a的约数个数等于n&#xff0c;有最大公约数等于1我们能够知道其实这两个数是互质的&…

wireshark抓包分析HTTP协议,HTTP协议执行流程,

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 使用WireShark工具抓取「HTTP协议」的数据包&#…

RedissonClient中Stream流的简单使用

1、pub端 //获取一个流 RStream rStream redissonClient.getStream("testStream"); //创建一个map&#xff0c;添加数据 Map<String, Object> rr new HashMap<>(); rr.put("xx", RandomUtil.randomString(5)); //添加到流 rStream.addAll(r…

Allegro如何查看器件的管脚号?

Allegro在默认情况下,器件是不显示管脚号的。 Allegro默认情况下,器件不显示管脚编号。 在PCB布局时,有时候我们需要看器件的管脚号,然后才能方便布局。那如何查看器件的管脚号呢? 这里介绍两种查看器件的管脚编号的方法。 方法一: (1)选择菜单Display→Color/Visi…

一款好用的PDF文档解密软件

PDF Decrypter pro 纯免费&#xff0c;没有页数限制&#xff0c;没有额外水印&#xff0c;强烈推荐&#xff01;

提升后端API性能的几种解决方案

&#x1f514;目的 提升后端API性能的主要目的是为了提高系统整体的响应速度、并发能力以及可用性。主要原因包括: 提高用户体验 后端API性能好可以减少响应延迟,给用户流畅的体验。 提高系统吞吐量 优化API性能可以提高系统的整体吞吐量,处理更多用户请求。 节省服务器资源…

深入理解强化学习——强化学习和有监督学习

分类目录&#xff1a;《深入理解强化学习》总目录 通过前文的介绍&#xff0c;我们现在应该已经对强化学习的基本数学概念有了一定的了解。这里我们回过头来再看看一般的有监督学习和强化学习的区别。以图片分类为例&#xff0c;有监督学习&#xff08;Supervised Learning&…

利用Python构建自定义报告生成器支持SEO分析实战总结

在进行SEO&#xff08;搜索引擎优化&#xff09;分析时&#xff0c;定制化的报告生成器是非常有价值的工具之一。通过利用Python编程语言构建自定义报告生成器&#xff0c;可以更好地满足个性化的需求&#xff0c;并提供详尽的SEO分析结果。本文将分享一些实践经验&#xff0c;…

3、在 CentOS 8 系统上安装 PostgreSQL 15.4

PostgreSQL&#xff0c;作为一款备受欢迎的开源关系数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;已经存在了三十多年的历史。它提供了SQL语言支持&#xff0c;用于管理数据库和执行CRUD操作&#xff08;创建、读取、更新、删除&#xff09;。 由于其卓越的健壮性…