Uniapp生命周期

Uniapp

生命周期

一、组件生命周期

• onMounted ：组件被挂载后运行，在引入组件文件中设置
• onUnmounted ：组件卸载后运行，在组件中设置。

<script setup lang="ts">
    import { onMounted } from 'vue'
    const scroll = ref(null);
    onMounted(() => {
            console.log("这里是scroll");
            console.log(scroll);
    })
    console.log("未挂载前的scroll");			//会发现下面的先执行
    console.log(scroll);
</script>

主文件中：						
<use-slot v-if="show">
</use-slot>
<script setup lang="ts">		
    const show = ref(true);			//计时结束，下面组件文字会触发
    setTimeout(() => {
            show.value = false;
    }, 5000);
</script>	
组件中：
<script setup lang='uts'>
	import {onUnmounted} from "vue"
	onUnmounted(()=>{
		console.log("子组件已被摧毁");
	})
</script>

二、页面生命周期

顺序是 onLoad -> onShow -> onReady

• onLoad ：进入页面与运行，重要的是有一个回调函数，可以传上个页面跳转带的值

上一个页面
<WebName username="测试axios" urll="/pages/zhujian/zhujian?name='张三'&age=18"></WebName>
<!-- 传递值为name=张三，age=18 -->

<script setup lang="ts">
import {onLoad} from "@dcloudio/uni-app"
	onLoad((e) => {
		console.log("这里是onLoad函数");
		console.log(e.name);
	})
</script>

• onReady ：监听页面初次渲染完成，组件挂载完成，DOM树可用。（类似于onMounted ）

• onShow ：返回页面会触发，为了 onLoad， **onReady **出现

• onHide ：离开页面触发。

设置一个定时器模拟，离开页面暂停，回来触发
<view>计数：{{count}}</view>
<script setup lang="ts">
    import {onShow, onHide} from "@dcloudio/uni-app"
	const count = ref(0);
	let time = setInterval(()=>{
		count.value++
	},50);
	onShow(()=>{
		console.log("这是里onShow函数");
		time = setInterval(()=>{
			count.value++
		},50);
	})
	onHide(()=>{
		console.log("onHide函数");
		clearInterval(time);
	})
    onReady(()=>{
		console.log("onReady函数");
	})
</script>

三、APP生命周期

在 **APP.uvue **中有三个自带的APP生命周期是全局的，优先于页面生命周期

onLaunch: function () {
    console.log('App Launch')
},
onShow: function () {
    console.log('App Show')
},
onHide: function () {
    console.log('App Hide')
},

四、执行顺序

1. 不包含组件的页面

onLoad > onShow > onReady

2. 包含组件的页面

onLoad > onShow > onBeforeMount > onReady > onMounted

五、页面生命周期补充

• onUnload ：页面卸载，需要页面内容被清除不可返回的跳转方式才能触发。

<navigator open-type="reLaunch" url="/pages/zhifubao/zhifubao">跳转</navigator>

<script setup lang="ts">
import {onUnload} from "@dcloudio/uni-app"
    onUnload(()=>{
        console.log("卸载页面");
    })
</script>

• onPageScroll ：滑动页面返回值，可以做辅助栏。

<view class="fixed" v-if="fixed">↑</view>
<script setup lang="ts">
    import {onPageScroll} from "@dcloudio/uni-app"
	const fixed = ref(false);
	onPageScroll((e)=>{
		console.log(e.scrollTop);
		fixed.value = e.scrollTop>300;
	})
</script>