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

相关推荐
小付-小付36 分钟前
萤石云监控web+uniapp
uni-app
骑驴看星星a6 小时前
数学建模--Topsis(Python)
开发语言·python·学习·数学建模
ReedFoley7 小时前
【笔记】动手学Ollama 第七章 应用案例1 搭建本地AI Copilot编程助手
人工智能·笔记·copilot
长安即是故里8 小时前
Maxwell学习笔记
笔记·学习
★YUI★10 小时前
学习制作记录(选项UI以及存档系统)8.24
学习·游戏·ui·unity·c#
咸甜适中10 小时前
rust语言 (1.88) egui (0.32.1) 学习笔记(逐行注释)(十四)垂直滚动条
笔记·学习·rust·egui
努力敲代码的小盆友10 小时前
[自用笔记]上传本地项目至github
笔记·github
It_张11 小时前
Building Systems with the ChatGPT API 使用 ChatGPT API 搭建系统(第五章学习笔记及总结)
笔记·学习·chatgpt
The_Second_Coming12 小时前
Linux 学习笔记 - 集群管理篇
linux·笔记·学习
996幸存者14 小时前
下拉、上拉选择器 支持搜索、删除、自定义选择内容、任意对象字段映射
微信小程序·uni-app