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.nameage.value = e.ageconsole.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