uni-app学习笔记十五-vue3页面生命周期(二)

onShow:用于监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面;

onHide:监听页面隐藏,当离开当前页面时触发。

示例代码:

html 复制代码
<template>
	<view>
		姓名:{{name}}
		年龄:{{age}}
	</view>
	<scroll-view scroll-y="true"  ref="scroll">
		<view></view>
	</scroll-view>
	<view>
		<navigator url="/pages/demo5/demo5">跳转到demo5</navigator>
	</view>
	<view>--------------</view>
	<view>{{count}}</view>
</template>

<script setup>
	import {ref} from "vue"
	import {onLoad,onReady,onShow,onHide} from "@dcloudio/uni-app"
	const name = ref("Jim")
	const age = ref("16")
	const scroll = ref(null)
	const count = ref(0)
	
	let time = setInterval(()=>{
		count.value++
	},50)
	
	onLoad((e)=>{
		console.log("onLoad函数")
		console.log(e)
		name.value = e.name
		age.value = e.age
		console.log("onload时的值:"+scroll.value)
	})
	
	onShow(()=>{
		console.log("onShow函数")
		time = setInterval(()=>{
			count.value++
		},50)
	})
	
	onHide(()=>{
		console.log("onHide函数")
		clearInterval(time)
	})
	
	onReady((e)=>{
		console.log("onReady函数")
		console.log("onReady时的值:"+scroll.value)
		console.log("onReady时获取到的参数值:"+e)
	})
</script>

设置定时器:

javascript 复制代码
let time = setInterval(()=>{
		count.value++
	},50)

清除定时器

javascript 复制代码
clearInterval(time)

不包含组件的页面的生命周期执行顺序:

onLoad -->onShow-->onReady

包含组件的页面的生命周期执行顺序:

onLoad-->onShow-->beforeCreate-->created-->beforeMount-->mounted--onReady

相关推荐
递归不收敛31 分钟前
吴恩达机器学习课程(PyTorch适配)学习笔记:2.4 激活函数与多类别处理
pytorch·学习·机器学习
加油201934 分钟前
如何快速学习一个网络协议?
网络·网络协议·学习·方法论
A9better1 小时前
嵌入式开发学习日志36——stm32之USART串口通信前述
stm32·单片机·嵌入式硬件·学习
不太可爱的叶某人1 小时前
【学习笔记】kafka权威指南——第6章 可靠的数据传递
笔记·学习·kafka
研猛男3 小时前
0、FreeRTOS编码和命名规则
笔记·stm32·freertos
2301_790994994 小时前
仿神秘海域/美末环境交互的程序化动画学习
学习·microsoft·交互
能不能别报错4 小时前
K8s学习笔记(十六) 探针(Probe)
笔记·学习·kubernetes
初圣魔门首席弟子4 小时前
C++ STL 向量(vector)学习笔记:从基础到实战
c++·笔记·学习
qiangshang9901265 小时前
WPF+MVVM入门学习
学习·wpf
iconball5 小时前
个人用云计算学习笔记 --20 (Nginx 服务器)
linux·运维·笔记·学习·云计算