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

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

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

示例代码：

<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>

设置定时器：

let time = setInterval(()=>{
		count.value++
	},50)

清除定时器

clearInterval(time)

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

onLoad -->onShow-->onReady

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

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