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

相关推荐
【上下求索】5 小时前
学习笔记090——Ubuntu 中 UFW 防火墙的使用
笔记·学习·ubuntu
NeRF_er5 小时前
STORM代码阅读笔记
大数据·笔记·storm
UQWRJ5 小时前
菜鸟教程Linux ViVimYumApt笔记
linux·运维·笔记
程序员Xu5 小时前
【OD机试题解法笔记】查找接口成功率最优时间段
笔记·算法
hhj123k6 小时前
渗透作业3
网络·学习
心一信息6 小时前
HCIE学习之路:一个NAT实验
学习·计算机网络·智能路由器
wb1897 小时前
企业WEB应用服务器TOMCAT
运维·前端·笔记·tomcat·云计算
Se_ren_di_pity7 小时前
CS231n2017-Lecture9经典CNN架构笔记
人工智能·笔记·cnn
蓝桉8027 小时前
opencv学习(视频读取)
人工智能·opencv·学习