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

相关推荐
兔兔爱学习兔兔爱学习1 小时前
Spring Al学习7:ImageModel
java·学习·spring
崎岖Qiu3 小时前
【设计模式笔记06】:单一职责原则
java·笔记·设计模式·单一职责原则
江苏世纪龙科技4 小时前
新能源汽车动力系统拆装与检测实训MR软件介绍-比亚迪秦EV标准版
学习
im_AMBER4 小时前
数据结构 09 二叉树作业
数据结构·笔记·学习
00后程序员张6 小时前
如何提高 IPA 安全性 多工具组合打造可复用的 iOS 加固与反编译防护体系(IPA 安全 iOS 加固 无源码混淆 Ipa Guard 实战)
android·安全·ios·小程序·uni-app·iphone·webview
www.026 小时前
linux服务器升级显卡驱动(笔记)
linux·运维·服务器·笔记·ubuntu·服务器环境
せいしゅん青春之我6 小时前
【JavaEE初阶】TCP核心机制10——异常情况的处理
java·网络·笔记·网络协议·tcp/ip·java-ee
wdfk_prog7 小时前
[Linux]学习笔记系列 -- [kernel][time]hrtimer
linux·笔记·学习
摇滚侠7 小时前
Spring Boot3零基础教程,把 Java 程序打包为 Linux 可执行文件,笔记91
java·linux·笔记
游戏开发爱好者87 小时前
Fiddler抓包实战教程 从安装配置到代理设置,详解Fiddler使用方法与调试技巧(HTTPHTTPS全面指南)
前端·测试工具·小程序·https·fiddler·uni-app·webview