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

news2024/9/23 23:24:08

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.coloradmin.cn/o/801347.html

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

相关文章

Vue中使用Typescript及Typescript基础

准备工作 新建一个基于ts的vue项目 通过官方脚手架构建安装 # 1. 如果没有安装 Vue CLI 就先安装 npm install --global vue/cli最新的Vue CLI工具允许开发者 使用 TypeScript 集成环境 创建新项目。 只需运行vue create my-app 然后选择选项&#xff0c;箭头键选择 Manuall…

国产芯片架构再下一城,ARM或被彻底抛弃,外媒:自作自受

有消息指出特定厂商的5G手机芯片将采用RISC-V架构&#xff0c;这是国产芯片彻底抛弃ARM的标志&#xff0c;毕竟ARM如今对中国芯片越来越不友好&#xff0c;最新款的ARM V9架构就未对多家中国芯片企业授权&#xff0c;抛弃ARM在情理之中。 据悉特定企业的5G手机芯片为RISC-V架构…

Vue项目中强制刷新页面的方法

我们在动态切换组件的过程中&#xff0c;导航栏和底栏不动&#xff0c;动态切换中间区域的情况&#xff0c;在首页可以进行跳转任意组件&#xff0c;在组件与组件之间不能相互跳转&#xff0c;路由发生了变化&#xff0c;但是页面未改变&#xff0c;这时我们就需要强制刷新页面…

窗口透明丨窗口透明度设置控件透明以及窗体透明源码

透明窗口&#xff08;窗口上面文字图片等内容不透明&#xff09;的实现&#xff08;使用SetLayeredWindowAttributes API函数&#xff09; SetLayeredWindowAttributes的实现必须将窗口设置为WS_EX_LAYERED的扩展风格。 然而&#xff0c;只有WS_POPUP窗口才能设置WS_EX_LAYER…

SG函数Nim游戏博弈论

移棋子游戏 题目 https://vjudge.csgrandeur.cn/problem/LibreOJ-10243 给定一个有 N 个节点的有向无环图&#xff0c;图中某些节点上有棋子&#xff0c;两名玩家交替移动棋子。 玩家每一步可将任意一颗棋子沿一条有向边移动到另一个点&#xff0c;无法移动者输掉游戏。 对…

中国撤销3000亿订单,美芯质问还能卖给谁?Intel或暂停工厂

过去两年多来&#xff0c;美国芯片行业的收入大幅减少&#xff0c;然而这还不是低点&#xff0c;近期传出中国或撤销3200亿美元的芯片订单&#xff0c;这更是让美国芯片行业震惊&#xff0c;美芯巨头因此质问美国芯片卖给谁&#xff1f; 中国这几年一直都在稳步减少芯片进口&am…

PHP高校二手物品交易系统【纯干货分享,免费领源码04827】

目 录 摘要 1 绪论 1.1 研究背景 1.2国内外研究现状 1.3论文结构与章节安排 2 高校二手物品交易系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系统用例分析 2.5本章…

Java开发基础系列(十四):集合对象(Map)

&#x1f60a; 作者&#xff1a; 一恍过去 &#x1f496; 主页&#xff1a; https://blog.csdn.net/zhuocailing3390 &#x1f38a; 社区&#xff1a; Java技术栈交流 &#x1f389; 主题&#xff1a; Java开发基础系列(十三)&#xff1a;集合对象(Map) ⏱️ 创作时间&…

zlog日志库的使用

代码仓库&#xff1a;https://github.com/HardySimpson/zlog1、zlog 库的默认安装位置是 /usr/local/lib&#xff0c;头文件的安装位置是 /usr/local/include&#xff1b;若需要更改安裝位置&#xff0c;可以修改src/makefile文件下第50行的PREFIX&#xff1f; /usr/local 改为…

当Dubbo遇到高并发:探究流量控制解决方案

系列文章目录 面试Dubbo &#xff0c;却问我和Springcloud有什么区别&#xff1f; 超简单&#xff0c;手把手教你搭建Dubbo工程&#xff08;内附源码&#xff09; 【收藏向】从用法到源码&#xff0c;一篇文章让你精通Dubbo的SPI机制 Dubbo最核心功能——服务暴露的配置、使用…

Doris注意事项,Doris部署在阿里云,写不进去数据

1.Doris官网 Doris官网https://doris.apache.org/ 2.根本原因 本地idea访问FE&#xff0c;FE会返回BE的地址&#xff0c;但是在服务器上通过ip addr查看&#xff0c;发现只有局域网IP&#xff0c;所以FE返回了局域网的IP&#xff0c;导致idea连接不上BE 3.解决办法 重写Ba…

leetcode刷题常用代码片段

Vscode是常用的开发工具&#xff0c;代码插入能够把常见的代码嵌入智能提醒&#xff0c;减轻了很大的工作量&#xff0c;下面是我刷题的配置&#xff0c;直接复制黏贴到自己的cpp.json里就可以用了 左下角&#xff0c;打开设置&#xff0c;选择用户代码片段&#xff0c;选择自…

智慧农业:科技赋能农村发展

智慧农业发展前景灿烂多彩&#xff0c;正为农业带来新的转型升级。随着科技的不断发展&#xff0c;数字化、自动化和智能化技术逐渐渗透进农业领域&#xff0c;为农民提供了更多高效便捷的农业管理方式。智慧农业通过物联网、大数据、人工智能等先进技术&#xff0c;实现对农田…

如何跳出Java中的多层嵌套循环?

在Java中&#xff0c;要跳出多层嵌套循环&#xff0c;可以使用带有标签的break语句。通过在外层循环前加上一个标签&#xff0c;然后在内层循环中使用break语句后跟标签名称&#xff0c;可以实现跳出多层循环的目的。 以下是使用标签和break语句跳出多层嵌套循环的示例代码&…

为 Google Play 即将推出基于区块链的内容政策做好准备

作者 / Joseph Mills, Group Product Manager, Google Play 作为一个平台&#xff0c;Google Play 一直致力于帮助开发者将创新理念变为现实。Google Play 上托管了许多和区块链相关的应用&#xff0c;我们深知合作伙伴们希望扩展这些应用&#xff0c;并利用 NFT 等代币化数字资…

学习笔记|大模型优质Prompt开发与应用课(二)|第五节:只需3步,优质Prompt秒变应用软件

原作者&#xff1a;依依│百度飞桨产品经理 一乔│飞桨开发者技术专家 分享内容 01:大模型应用简介 02:LLM应用开发范式 03: Al Studio大模型社区 04:AI对话类应用开发技巧 大模型技术爆发&#xff0c;各类应用产品涌现 文心产业级知识增强大模型 工作中的“超级助手”—…

基于多任务学习卷积神经网络的皮肤损伤联合分割与分类

文章目录 Joint segmentation and classification of skin lesions via a multi-task learning convolutional neural network摘要本文方法实验结果 Joint segmentation and classification of skin lesions via a multi-task learning convolutional neural network 摘要 在…

Educational Codeforces Round 152 (Rated for Div. 2) B. Monsters

很早想到%K排序,但是就是WA2,心态崩了,昨天晚上差点睡不着觉吐了,感觉自己好笨啊啊啊, 言归正传, 按照正常的思路,样例是可以过的,但是AC不了,例如给出样例3 3 3 1 2 经过自己模拟应该输出1 3 2 ,但是只会输出1 2 3 ,知道症结所在debug,0的先输出,之后输出k-1,k-2…但是怎么实现…

接口自动化测试-Python自动发送测试报告邮件封装(详细)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 SMTP&#xff08;…

vue新学习 02 vue命令v-model,数据代理,事件,监听,渲染,计算属性(也就是把操作属性的语句放到vue实例中)

双向绑定用命令v-model&#xff1a; v-bind的命令是单项去绑定data中的相关属性&#xff0c;此时的data是真正的data&#xff0c;并没有用变量声明的方式去接收vue实例对象&#xff0c;也就是例如用const vm new Vue({})。而是直接就采用了new Vue&#xff08;{}&#xff09;这…