uniapp 微信小程序:页面+组件的生命周期顺序

uniapp 微信小程序:页面+组件的生命周期顺序

  • 首页
  • 页面
  • 父组件
  • 子组件
  • 完整顺序
  • 参考资料

这个uniapp的微信小程序项目使用的是 VUE2

首页

首页只提供了一个跳转按钮。

<template>
	<view>
		<navigator url="/pages/myPage/myPage?name=jerry" hover-class="navigator-hover">
			<button type="default">跳转到新页面</button>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {return { }},
	}
</script>

<style>
</style>

页面

<template>
	<view> 页面 <parent-component>parent-component</parent-component> </view>
</template>

<script>
	export default {
		data() {return { }},
		onInit(option){console.log(`页面 onInit: ${JSON.stringify(option)}`)},
		onLoad(option){console.log(`页面 onLoad: ${JSON.stringify(option)}`)},
		onShow(option){console.log(`页面 onShow: ${JSON.stringify(option)}`)},
		onReady(option){console.log(`页面 onReady: ${JSON.stringify(option)}`)},
		onHide(option){console.log(`页面 onHide: ${JSON.stringify(option)}`)},
		onUnload(option){console.log(`页面 onUnload: ${JSON.stringify(option)}`)},
		onResize(option){console.log(`页面 onResize: ${JSON.stringify(option)}`)},
		onPullDownRefresh(option){console.log(`页面 onPullDownRefresh: ${JSON.stringify(option)}`)},
		onReachBottom(option){console.log(`页面 onReachBottom: ${JSON.stringify(option)}`)},
		onTabItemTap(option){console.log(`页面 onTabItemTap: ${JSON.stringify(option)}`)},
		onShareAppMessage(option){console.log(`页面 onShareAppMessage: ${JSON.stringify(option)}`)},
		onPageScroll(option){console.log(`页面 onPageScroll: ${JSON.stringify(option)}`)},
		onShareTimeline(option){console.log(`页面 onShareTimeline: ${JSON.stringify(option)}`)},
		onAddToFavorites(option){console.log(`页面 onAddToFavorites: ${JSON.stringify(option)}`)},
	}
</script>

<style>
</style>

父组件

<template>
	<view> 父组件 <child-component>child-component</child-component> </view>
</template>

<script>
	export default {
		data() {return {};},
		beforeCreate(option){console.log(`父组件 beforeCreate: ${option}`)},
		created(option){console.log(`父组件 created: ${option}`)},
		beforeMount(option){console.log(`父组件 beforeMount: ${option}`)},
		mounted(option){console.log(`父组件 mounted: ${option}`)},
		beforeDestroy(option){console.log(`父组件 beforeDestroy: ${option}`)},
		destroyed(option){console.log(`父组件 destroyed: ${option}`)},
	}
</script>

<style>
</style>

子组件

<template>
	<view> 子组件 </view>
</template>

<script>
	export default {
		data() {return {};},
		beforeCreate(option){console.log(`子组件 beforeCreate: ${option}`)},
		created(option){console.log(`子组件 created: ${option}`)},
		beforeMount(option){console.log(`子组件 beforeMount: ${option}`)},
		mounted(option){console.log(`子组件 mounted: ${option}`)},
		beforeDestroy(option){console.log(`子组件 beforeDestroy: ${option}`)},
		destroyed(option){console.log(`子组件 destroyed: ${option}`)},
	}
</script>

<style>
</style>

完整顺序

在这里插入图片描述

// 进入
父组件 beforeCreate: undefined
父组件 created: undefined
父组件 beforeMount: undefined
子组件 beforeCreate: undefined
子组件 created: undefined
子组件 beforeMount: undefined
页面 onLoad: {"name":"jerry"}
页面 onShow: undefined
子组件 mounted: undefined
父组件 mounted: undefined
页面 onReady: undefined

// 退出
页面 onUnload: undefined
子组件 beforeDestroy: undefined
子组件 destroyed: undefined
父组件 beforeDestroy: undefined
父组件 destroyed: undefined

参考资料

uniap 页面生命周期
uniapp 组件生命周期

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

flask中的session介绍

flask中的session介绍 在Flask中&#xff0c;session是一个用于存储特定用户会话数据的字典对象。它在不同请求之间保存数据。它通过在客户端设置一个签名的cookie&#xff0c;将所有的会话数据存储在客户端。以下是如何在Flask应用中使用session的基本步骤&#xff1a; 首先…

Linux内核中的链表、红黑树和KFIFO

lLinux内核代码中广泛使用了链表、红黑树和KFIFO。 一、 链表 linux内核代码大量使用了链表这种数据结构。链表是在解决数组不能动态扩展这个缺陷而产生的一种数据结构。链表所包含的元素可以动态创建并插入和删除。链表的每个元素都是离散存放的&#xff0c;因此不需要占用连…

kafka消息监听

1&#xff0c;spring配置kafka网址 2&#xff0c;listener Component public class OrderMsgListener {KafkaListener(topics "order",groupId "order-service")public void listen(ConsumerRecord record){System.out.println("收到消息&#xf…

IPv6 over IPv4

IPv6 over IPv4隧道简介 IPv6 over IPv4隧道可实现IPv6网络孤岛之间通过IPv4网络互连。由于IPv4地址的枯竭和IPv6的先进性&#xff0c;IPv4过渡为IPv6势在必行。因为IPv6与IPv4的不兼容性&#xff0c;所以需要对原有的IPv4设备进行替换。但是如果贸然将IPv4设备大量替换所需成…

11.python设计模式【责任链模式】

内容&#xff1a;使多个对象都有机会处理请求&#xff0c;从而避免请求的发送者和接收者之间的耦合关系。将这些对象连成一条链&#xff0c;并沿着这条链传递该请求&#xff0c;直到有一个对象处理它为止。角色&#xff1a; 抽象处理者&#xff08;Handler&#xff09;具体处理…

【用户体验分析报告】 按需加载组件,导致组件渲染卡顿,影响交互体验?组件拆包预加载方案来了!

首先&#xff0c;我们看一些针对《如何提升应用首屏加载体验》的文章&#xff0c;提到的必不可少的措施&#xff0c;便是减少首屏幕加载资源的大小&#xff0c;而减少资源大小必然会想到按需加载措施。本文提到的便是一个基于webpack 插件与 react 组件实现的一套研发高度自定义…

索马里ECTN认证开船后办?都可以办的,

索马里ECTN认证开船后办&#xff1f;都可以办的&#xff0c;没有特别时间要求&#xff0c;可以在开船前办&#xff0c;也可以在开船后再办。因为索马里ECTN货物跟踪单看上去像是一份“证书”的文件&#xff0c;主要作用是用于目的港清关&#xff0c;所以很多客户习惯把它称为EC…

50条必背JAVA知识点(三)

31.面向对象中两个重要的概念&#xff1a;类&#xff1a;对一类事物的描述&#xff0c;是抽象的、概念上的定义对象&#xff1a;是实际存在的该类事物的每个个体&#xff0c;因而也称为实例(instance) 32.虚拟机栈&#xff0c;即为平时提到的栈结构。局部变量存储在栈结构中&am…

【数据动态填充到element表格;将带有标签的数据展示为文本格式】

一&#xff1a;数据动态填充到element表格&#xff1b; 二&#xff1a;将带有标签的数据展示为文本格式&#xff1b; 1、 <el-row><el-col :span"24"><el-tabs type"border-card"><el-tab-pane label"返回值"><el-…

IL汇编字符串连接

在此实现了一个基本的IL汇编程序&#xff1b; 了解MSIL汇编和IL汇编评估堆栈_bcbobo21cn的博客-CSDN博客 它用了下面两句来在屏幕输出字符串&#xff0c; ldstr "I am from the IL Assembly Language..." call void [mscorlib]System.Console::WriteLine (string) …

WMS是什么意思,WMS有什么功能

阅读本篇文章&#xff0c;您可以了解到&#xff1a;1、WMS的定义&#xff1b;2、WMS的功能&#xff1b;3、WMS的好处&#xff1b;4、WMS的未来。 一、WMS的定义 WMS全称为Warehouse Management System&#xff0c;即仓库管理系统&#xff0c;是一种用于管理和控制仓库操作的软…

day42-Live User Filter(实时用户过滤器)

50 天学习 50 个项目 - HTMLCSS and JavaScript day42-Live User Filter&#xff08;实时用户过滤器&#xff09; 效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport…

CTF PWN-攻防世界CGfsb格式化字符串漏洞

文章目录 前言格式化字符串漏洞格式化字符串漏洞基本原理简单典型案例 漏洞的危害与利用拒绝服务攻击内存数据读取内存数据覆盖 攻防世界&#xff1a;CGfsg题目思路简析任意地址覆写 总结 前言 距离 2021 年年底短暂接触学习 CTF PWN 相关知识&#xff08;CTF PWN-攻防世界XCT…

光伏储能行业MES系统解决方案

万界星空科技光伏储能行业mes解决方案连接起仓储物流、生产计划、制程管理、品质管理等各个模块&#xff0c;覆盖全厂的各个工序段&#xff0c;提供计划的执行、跟踪以及所有资源(人、设备、物料等)的当前状态&#xff0c;帮助企业实现产品质量、生产效率的提升。 万界星空平台…

灵雀云Alauda MLOps 现已支持 Meta LLaMA 2 全系列模型

在人工智能和机器学习领域&#xff0c;语言模型的发展一直是企业关注的焦点。然而&#xff0c;由于硬件成本和资源需求的挑战&#xff0c;许多企业在应用大模型时仍然面临着一定的困难。为了帮助企业更好地应对上述挑战&#xff0c;灵雀云于近日宣布&#xff0c;企业可通过Alau…

大数据实时链路备战 —— 数据双流高保真压测 | 京东云技术团队

一、大数据双流建设 1.1 数据双流 大数据时代&#xff0c;越来越多的业务依赖实时数据用于决策&#xff0c;比如促销调整&#xff0c;点击率预估、广告分佣等。为了保障业务的顺利开展&#xff0c;也为了保证整体大数据链路的高可用性&#xff0c;越来越多的0级系统建设双流&…

Leetcode-每日一题【剑指 Offer 66. 构建乘积数组】

题目 给定一个数组 A[0,1,…,n-1]&#xff0c;请构建一个数组 B[0,1,…,n-1]&#xff0c;其中 B[i] 的值是数组 A 中除了下标 i 以外的元素的积, 即 B[i]A[0]A[1]…A[i-1]A[i1]…A[n-1]。不能使用除法。 示例: 输入: [1,2,3,4,5]输出: [120,60,40,30,24] 提示&#xff1a; 所…

UVM重点归纳(快收藏 !)

factory机制 利用工厂机制的一般实现步骤&#xff1a; 1.继承 范式&#xff1a; class comp_type/obj_type extends uvm_component/uvm_object; 实例&#xff1a; class comp1/obj1 extends uvm_component/uvm_object; 2.注册 范式&#xff1a; uvm_component/object_utils…

组件开发系列--Apache Commons Chain

一、前言 Commons-chain是apache commons中的一个子项目,主要被使用在"责任链"的场景中,struts中action的调用过程,就是使用了"chain"框架做支撑.如果你的项目中,也有基于此种场景的需求,可以考虑使用它. 在责任链模式里&#xff0c;很多对象由每一个对象对…

Python中运行取消Python console模式

在Python里run的时候突然会发现&#xff0c;进入的不是run模式&#xff0c;而是console模式&#xff0c;这种运行模式能保留你每次的运行历史&#xff0c;因为会重开一个运行小页面&#xff0c;关闭操作如下&#xff1a;