uniapp生命周期

uniapp生命周期包括应用生命周期、页面生命周期和组件生命周期;

1、应用生命周期

app.vue/uvue是uni-app的朱组件。所有页面都是在app.vue下进行切换,是应用入口文件。但app.vue本身不是页面,这里补鞥编写视图元素,也就没有。
这个文件的作用:监听应用生命周期、配置全局样式、配置全局的存储globalData;
应用生命周期仅可在app.vue中监听,在页面监听无效;
在这里插入图片描述
官网参考:应用生命周期详解

//app.vue页面
<script>// 只能在App.vue里监听应用的生命周期export default {onLaunch: function(options) {console.log('App Launch')console.log('应用启动路径:', options.path)},onShow: function(options) {console.log('App Show')console.log('应用启动路径:', options.path)},onHide: function() {console.log('App Hide')}}
</script>

全局存储globalData

//app.vue页面
<script>// 只能在App.vue里监听应用的生命周期export default {globalData: {  text: '测试',selectedColor:'#1281c1'},onLaunch: function(options) {this.globalData = '测试2';},onShow: function(options) {getApp().globalData.text = 'test';}}
</script>

js中设置方式:getApp().globalData.text = ‘test’;
在应用onLaunch时,getApp对象还未获取,暂时可以使用this.globalData获取globalData;
如果需要把globalData的数据绑定到页面上,可在页面的onShow页面生命周期里进行变量重赋值;

//index.vue页面
<template><view class="container"></view>
</template>
<script>
export default {data(){return {selectedColor: getApp().globalData.selectedColor}},onShow(){getApp().globalData.text = 'test';},
}
</script>
<style lang="scss" scoped>
</style>

全局样式

<style>/* #ifndef APP-PLUS-NVUE */@import './common/uni.css';/* #endif*/
</style>

2、页面生命周期

函数名说明
onInit监听页面初始化,其参数同 onLoad 参数,为上个页面传递的数据,参数类型为 Object(用于页面传参),触发时机早于 onLoad
onLoad监听页面加载,该钩子被调用时,响应式数据、计算属性、方法、侦听器、props、slots 已设置完成,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参)
onShow监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady监听页面初次渲染完成,此时组件已挂载完成,DOM 树($el)已可用,注意如果渲染速度快,会在页面进入动画完成前触发
onHide监听页面隐藏
onUnload监听页面卸载
onResize监听窗口尺寸变化
onPullDownRefresh监听用户下拉动作,一般用于下拉刷新
onReachBottom页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项
onTabItemTap点击 tab 时触发,参数为Object,具体见下方注意事项
onShareAppMessage用户点击右上角分享
onPageScroll监听页面滚动,参数为Object
onNavigationBarButtonTap监听原生标题栏按钮点击事件,参数为Object
onBackPress监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack;
onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件(pages.json 中的 searchInput 配置 disabled 为 true 时才会触发)
onShareTimeline监听用户点击右上角转发到朋友圈
onAddToFavorites监听用户点击右上角收藏

页面加载顺序

在这里插入图片描述

注意事项

  1. 可接收上个页面传参的声明周期:onInit、onload,经常使用的为onload
  2. A页面使用navigateTo()页面跳转到B页面,A页面会触发onHide生命周期,B页面触发onShow;B页面返回会触发A页面onShow,B页面onUnload;(这是一个会重复触发的事件)
  3. A页面使用redirectTo()跳转时,A页面会触发onUnload(页面生命周期)、beforeDestory(组件生命周期)、destoryed(组件生命周期),B页面触发onshow;
  4. onInit仅百度小程序基础库3.260以上支持;其他版本或平台可使用onload兼容。

navigateTo()保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
redirectTo(OBJECT)关闭当前页面,跳转到应用内的某个页面;

onbackpress使用场景参考
官网详情

3、组件生命周期

uniapp的组件生命周期与vue标准组件的生命周期相同;
在这里插入图片描述

4、生命周期的执行顺序

app.vue + 单个页面

//app.vue页面
<script>export default {onLaunch: function(options) {console.log('App onLaunch')},onShow: function(options) {console.log('App onShow')}}
</script>
//pages文件中index.vue页面
<template><view class="container"></view>
</template>
<script>
export default {onLoad() {console.log('首页onLoad');},onShow() {console.log('首页onshow');},onHide() {console.log('首页onhide');},beforeCreate() {console.log('首页beforeCreate');},created() {console.log('首页created');},beforeMount() {console.log('首页beforeMount');},mounted() {console.log('首页mounted');},onReady() {console.log('首页onReady');},onUnload() {console.log('首页onUnload');},data(){return {}}
}
</script>
<style lang="scss" scoped>
</style>
//执行顺序
App onLaunch
App onShow
首页beforeCreate
首页onLoad
首页onshow
首页created
首页beforeMount
首页onReady
首页mounted

包含组件的页面

//pages文件中index.vue页面
<template><view class="container"><uni-badge class="uni-badge-left-margin" text="uni组件" />......</view>
</template>
<script>
export default {data(){return {}}
}
</script>
<style lang="scss" scoped>
</style>
//执行顺序
首页beforeCreate
首页onLoad
首页onshow
首页created
首页beforeMount
组件beforeCreate
组件created
组件beforeMount组件2 beforeCreate 》 组件2 created 》 组件2 beforeMount组件3 beforeCreate 》 组件3 created 》 组件3 beforeMount
组件mounted
组件2 mounted
组件3 mounted
首页onReady
首页mounted

一般使用场景

  1. page onload(接收页面传参)
  2. page mounted(配合后端接口获取数据)

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

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

相关文章

vue生命周期

1、vue声明周期及生命周期函数 vue声明周期 每一个vue实例从创建到销毁的过程&#xff0c;就是这个vue实例的生命周期。在这个过程中&#xff0c;他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程&#xff1b; 生命周期&#xff1a;…

唇形驱动媲美头部厂商,青否数字人SaaS系统6.0重磅发布!

青否数字人SaaS系统6.0重磅发布&#xff01;唇形驱动效果及清晰度媲美硅基等头部厂商&#xff0c;同时优化数字人短视频模块。 唇形驱动媲美头部 青否数字人SaaS系统6.0版本重点优化了唇形驱动&#xff0c;AI技术已经实现与真人形象的1:1克隆&#xff0c;唇形、牙齿和舌头高清…

当科技遇上神器:用Streamlit定制AI可视化问答界面

Streamlit是一个开源的Python库&#xff0c;利用Streamlit可以快速构建机器学习应用的用户界面。 本文主要探讨如何使用Streamlit构建大模型外部知识检索的AI问答可视化界面。 我们先构建了外部知识检索接口&#xff0c;然后让大模型根据检索返回的结果作为上下文来回答问题。…

【AUTOSAR】【以太网】DoIp

AUTOSAR专栏——总目录_嵌入式知行合一的博客-CSDN博客文章浏览阅读217次。本文主要汇总该专栏文章,以方便各位读者阅读。https://xianfan.blog.csdn.net/article/details/132072415 目录 一、概述 二、功能描述 2.1 Do

DNS 域名解析协议

作用 将域名转化位IP地址 域名 用’ . ’ 隔开的字符串&#xff0c;如&#xff1a;www.badu.com,就是为了赋予IP特殊含义。 一级域名 .com &#xff1a;公用 .cn&#xff1a;中国 .gov&#xff1a;政府 .us&#xff1a;美国 .org&#xff1a;组织 .net&#xff1a;网站 对应一级…

HTML脚本、字符实体、URL

HTML脚本&#xff1a; JavaScript 使 HTML 页面具有更强的动态和交互性。 <script> 标签用于定义客户端脚本&#xff0c;比如 JavaScript。<script> 元素既可包含脚本语句&#xff0c;也可通过 src 属性指向外部脚本文件。 JavaScript 最常用于图片操作、表单验…

Vue路由导航(replace、push、forward、back、go)

Vue路由导航&#xff08;replace、push、forward、back、go&#xff09; 先了解栈结构&#xff0c;再学习以下内容 栈的数据结构&#xff1a;先进后出&#xff0c;后进先出。原理&#xff1a;push将元素压入栈内&#xff0c;pop将元素弹出&#xff0c;栈有分别有栈底指针和栈顶…

C++11 initializer_list 轻量级初始化列表的使用场景(让自定义类可以用初始化列表的形式来实例化对象)

initializer_list 是 C11 中的一个特性&#xff0c;它允许你使用花括号 {} 中的值列表来初始化容器或数组。通常用于初始化标准库容器&#xff0c;比如 std::vector、std::set、std::map 以及数组。 场景一&#xff1a;用初始化列表初始化容器 std::vector<int> arr {…

Java中Deque栈对象的增删查(所有方法详解)

1、Deque栈的增删查方法总结 2、方法增删查 栈顶添加&#xff1a;push、offFirst栈尾添加&#xff1a;add、offer、offerLast栈顶删除&#xff1a;remove、pop、poll、pollFirst栈尾删除&#xff1a;pollLast栈顶查看&#xff1a;peek、peekFirst栈尾查看&#xff1a;peekLast…

搭载基于RK3229的Android5.1修改开机默认桌面Launcher

1、找到ActivityManagerService.java 在..\rk3229_5.1_box\frameworks\base\services\core\java\com\android\server\am目录找到ActivityManagerService.java文件。在文件里找到startHomeActivityLocked函数里的setDefaultLauncher。 boolean startHomeActivityLocked(int use…

软件设计模式原则(一)迪米特法则

开一个小专题——详细总结一下软件设计模式原则&#xff0c;这部分在《软计》和《java设计模式》中算是很重要的知识点&#xff0c;值得展开详细讲解一下~首先介绍的是【迪米特法则】 一.定义 迪米特法则又称为最少知识原则&#xff0c;其定义为&#xff1a;一个软件实体应当尽…

微众银行备用金怎么取出来

在这个数字时代里&#xff0c;互联网金融产品以其便捷性和创新性逐渐成为我们日常生活中不可或缺的一部分。微众银行作为国内领先的互联网银行&#xff0c;其旗下的微众备用金产品凭借其灵活、便捷的特性&#xff0c;深受消费者喜爱。那么&#xff0c;微众备用金怎么借钱出来呢…

JavaScript中BOM与DOM

BOM window对象 所有的浏览器都支持window对象&#xff0c;他表示浏览器窗口&#xff0c; 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。全局函数是 window 对象的方法。 接下来要讲的HTML DOM 的 document 也是…

【设计模式】第24节:行为型模式之“模板方法模式”

一、简介 模板方法模式在一个方法中定义一个算法骨架&#xff0c;并将某些步骤推迟到子类中实现。模板方法模式可以让子类在不改变算法整体结构的情况下&#xff0c;重新定义算法中的某些步骤。 模板模式有两大作用&#xff1a;复用和扩展。其中&#xff0c;复用指的是&#…

Tailwind CSS vs 现代CSS,Tailwind CSS 会像CSS-in-JS 一样亡?

本文是 关于Tailwind CSS 与 现代 CSS之间比较的文章。文章中作者详细比较了这两种CSS开发方法的优缺点。他指出&#xff0c;Tailwind CSS是一种基于类的CSS框架&#xff0c;提供了快速开发网站的便利性&#xff0c;但可能导致HTML代码的臃肿。另一方面&#xff0c;现代CSS方法…

蓝桥杯每日一题2023.10.31

题目描述 全球变暖 - 蓝桥云课 (lanqiao.cn) 题目分析 果然有关连通块类的问题使用dfs都较为好写~~ 我们可以通过判断连通块的代码来加上部分条件算出被完全淹没的岛屿个数 在岛屿中如果有为"#"的a[i][j]上下左右全部是"#"则说明此岛屿一定不会被完全…

MojoUserAgent库

Mojo::UserAgent 是 Perl 编程语言中的一个库&#xff0c;用于创建和管理 HTTP 请求。它提供了一个简单而强大的接口&#xff0c;用于发送 HTTP 请求并处理响应。 以下是一个使用 Mojo::UserAgent 的简单示例&#xff1a; use Mojo::UserAgent;创建一个 Mojo::UserAgent 对象…

[2016-2018]phpstudy的exp制作

[2016-2018]phpstudy的exp制作 用python的requests模块进行编写 修改请求数据包进行远程代码执行 import requests import base64 def remove_code_execute():try:url input("请输入要测试的网址:")cmd input("想要执行的命令:")cmd f"system({…

【Linux】Linux项目部署及更改访问端口号和jdk、tomcat、MySQL环境搭建的配置安装

目录 一、作用 二、配置 1、上传安装包 2、jdk 2.1、解压对应安装包 2.2、环境变量搭建 3、tomcat 3.1、解压对应安装包 3.2、启动 3.3、设置防火墙 3.4、设置开发端口 4、MySQL 三、后端部署 四、Linux部署项目 1、单体项目 五、修改端口访问 1、进入目录 2…

vue+elementUI 设置el-descriptions固定长度并对齐

问题描述 对于elementUI组件&#xff0c;el-descriptions 在以类似列表的形式排列的时候&#xff0c;上下无法对齐的问题。 问题解决 在el-descriptions 标签中&#xff0c;添加属性&#xff1a; :contentStyle"content_style" 控制其内容栏长度 <el-descripti…