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