生命周期onLoad、onShow、onReady、onHide、onUnLoad、onPageScroll和App.vue的生命周期

<template>
    <text>{{name}}</text>
    
    <view ref="v">
        <navigator url="/pages/index/index">回到主页面</navigator>
    </view>
    
    <view class="">
        <navigator url="/pages/index/index" open-type="reLaunch">关闭所有页面，回到主页面</navigator>
    </view>
    
    <view v-for="item in 50">{{item}}</view>
</template>

<script setup>
    import {onLoad,onReady,onShow, onHide, onUnload, onPageScroll} from '@dcloudio/uni-app'
    import {ref,onBeforeMount,onMounted} from 'vue'
    
    // 代码顺序是执行顺序
    let name = ref('')
    // 等同于beforeCreate和create，只会执行一次
    onLoad((e)=>{
        // e 是路由传参的过来的值
        console.log(e)
        name.value = e.name
    })
    
    // 使用navigator跳转过来也会进入该生命周期，每次跳转都会执行
    // 切换屏幕回到该页面也会执行该生命周期，每次切换都会执行
    onShow(()=>{
        console.log('onShow')
    })
    
    // 执行顺序
    onBeforeMount(()=> {
        console.log('onBeforeMount')
    })
    
    let v = ref(null)
    // 等同于onBeforeMount和onMount，只会执行一次
    onReady(()=>{
        // 可以获取到dom
        console.log(v.value,)
    })
    
    onMounted(()=> {
        console.log('onMounted')
    })
    
    // 使用navigator跳转离开本页面会触发该生命周期，每次跳转都会执行
    // 切换屏幕跳走到其他页面也会执行该生命周期，每次切换都会执行
    onHide(()=>{
        console.log('onHide','life')
    })
    
    // 使用reLaunch模式的跳转才会执行该生命周期，reLaunch是关闭其他页面
    // 因为使用正常的跳转不会关闭页面，会添加的数据到内存中
    onUnload(()=>{
        console.log('onUnload')
    })
    
    // 当有页面滚动的时候触发，能够获得scrollTop值
    onPageScroll((e)=>{
        console.log(e.scrollTop)
    })
</script>

<style>
</style>

 

<script>
    export default {
        // 公共生命周期
        
        // 进入页面就执行一次
        onLaunch: function() {
            console.log('App Launch')
        },
        // 执行优先顺序高，会比页面同样的生命周期优先
        onShow: function() {
            console.log('App Show')
        },
        // 执行优先顺序高，会比页面同样的生命周期优先
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

<style>
    /*每个页面公共css */
</style>