组合式声明周期钩子(组件生命周期)
创建一个vue组件它会经过一些步骤，我们把这一系列步骤成为生命周期钩子，如：创建，挂载，更新，销毁4个阶段，我们可以在这4个生命周期阶段中进行相应的操作，其中“创建”这一阶段的方法在vue3中可以被setup代替因为setup()执行在创建前面，如果不清楚可以看一下：官方文档生命周期执行图示
组件生命周期钩子函数
onBeforeMount(挂在前)：在组件还没有挂载之前执行的回调函数
onMounted(挂载后)：在组件挂载后执行的回调函数
onBeforeUpdate(更新前)：在组件的数据发生变化之前执行的回调函数
onUpdated(更新后)：在组件的数据发生改变的时候执行的回调函数
onBeforeUnmount(销毁前)：在组件被销毁前执行的回调函数
onUnmounted(销毁后)：在组件被销毁之后执行的回调函数
更多详细的组件生命周期函数方法以及详细介绍：官方文档 组合式API：生命周期钩子
声明钩子函数步骤
1.用ref注册引用信息
<view ref="el"></view>
2.引入钩子函数并定义应用信息名称
import {onMounted} from 'vue';
const el=ref(null);
3.编写钩子函数方法
onMounted(()=>{
//执行内容
})
使用示例
演示内容：挂在前、挂载后、销毁后
<template>
<view class="">
<life-test ref="el" v-if="show"></life-test>
</view>
</template>
<script setup>
import {onBeforeMount, onMounted,ref} from 'vue';
const el = ref(null);
const show=ref(true);
const num=ref(1);
onBeforeMount(()=>{
console.log(el.value);//组件还没有被挂载时输出
})
onMounted(() => {
console.log(el.value);//组件挂载后输出
})
const interval= setInterval(()=>{
console.log("销毁倒计时："+num.value++);
},1000)
setTimeout(()=>{
clearInterval(interval);//销毁计时器
show.value=false;//销毁组件
},3000)
</script>
<style lang="scss" scoped>
</style>自定义组件中的代码
<template>
<scroll-view scroll-y='true' ref="scroll">
<view>子组件</view>
</scroll-view>
</template>
<script setup>
import { onUnmounted } from 'vue';
onUnmounted(()=>{
console.log("我被删除了");
})
</script>
<style lang="less">
</style>注意：其中一定要在组件上用ref来定义一个拿到组件信息的名字要不然拿不到组件信息
页面运行效果
组件生命周期演示
结论：我们从视频中可以看出，在我们没有挂载前是拿不到组件的信息的，因为那时候的组件还是虚拟的，在我们挂载后组件就变成了真实的了，所以我们可以拿到组件的信息，并且我设置了一个3秒后删除组件，在我们的组件删除后，我们可以做一些资源的释放、关闭定时器之类的操作。
页面生命周期
uniapp不仅有组件生命周期，还有页面生命周期，而且，他们两个生命周期的的一些方法是类似的。
页面生命周期函数
onInit：在页面初始化的时候触发调用的函数，其中的参数是上一个页面传递的数据，参数类型是Object
onLoad：在页面加载的时候触发，参数是上一个页面传递的数据，参数类型是Object，可以在这个函数内为页面的响应式参数赋传递过来的数据
onShow：监听组件开始挂载在页面时显示调用的函数，从子页面返回页面显示时也会调用
onReady：组件已经挂载完成，页面初次渲染完成时执行这个函数，注意：如果渲染的过快的话，会在页面进入动画完成之前触发
onHide：监听离开此页面时触发，如：切换到其他手机后台运行的其他应用
onUnload：监听页面被卸载时触发，多用于卸载页面时释放内存、资源
onPageScroll：监听到页面滚动时触发，参数类型是Object的
更多详细的页面生命周期用法及介绍：页面 | uni-app官网
声明页面生命周期步骤
1.引入页面周期函数
import {onLoad} from "@dcloudio/uni-app";
2.编写页面周期函数
onLoad((e) => {
注意：不是所有的页面周期函数都有参数
//执行内容
})
onLoad~onHide的函数使用示例
home页面代码
<template>
<h1 style="text-align: center;">主页</h1>
<navigator url="/pages/userInfo/userInfo?name=老六&age=25" class="navStyle">去用户信息页面</navigator>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.navStyle{
text-align: center;
font-size: 20px;
font-weight: bold;
margin-top: 10px;
}
</style>
通过navigator组件跳转页面时在url地址后面可通过?来传递值，传递多个值之间用&来连接
格式：url?传递值名称1=值1&传递值名称2=值2
userInfo页面代码
<template>
<view class="userInfo" ref="userInfo">
<image src="../../static/logo.png"></image>
<view class="info">姓名：{{name}}--年龄：{{age}}岁</view>
<view>运行时间：{{count}}秒</view>
<navigator url="/pages/demo2/demo2" class="navStyle">回到主页</navigator>
</view>
</template>
<script setup>
import {onBeforeMount, onMounted, ref} from "vue";
import {onLoad,onReady,onShow,onHide} from "@dcloudio/uni-app";
const name = ref("匿名");
const age = ref(18);
const userInfo = ref(null);
const orderNumber=ref(0);
const count=ref(0);
let time=null;
onBeforeMount(()=>{
console.log((++orderNumber.value)+".执行onBeforeMount函数");
})
onReady(() => {
console.log((++orderNumber.value)+".执行onReady函数");
console.log(userInfo.value);
})
onMounted(()=>{
console.log((++orderNumber.value)+".执行onMounted函数");
})
const flag=ref(false);
onShow(()=>{
console.log((++orderNumber.value)+".执行onShow函数");
if(flag.value){
time=setInterval(()=>{
count.value++
},1000)
}
})
onHide(()=>{
console.log((++orderNumber.value)+".执行onHide函数");
clearInterval(time);
flag.value=true;
console.log("离开页面暂停执行，停止在应用运行的"+count.value+"秒")
})
onLoad((e) => {
console.log((++orderNumber.value)+".执行onLoad函数");
name.value = e.name;
age.value = e.age;
console.log("得到传递的值后为姓名和年龄的赋值，姓名："+name.value+"年龄："+age.value);
time=setInterval(()=>{
count.value++
},1000)
})
console.log("当前页面默认值：姓名："+name.value+"，年龄："+age.value)
</script>
<style lang="scss" scoped>
.userInfo {
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: dimgrey;
image {
width: 100px;
height: 100px;
border-radius: 50%;
}
.info {
font-size: 20px;
padding-top: 10px;
color: white;
}
}
.navStyle{
text-align: center;
font-size: 20px;
font-weight: bold;
margin-top: 10px;
}
</style>页面运行效果
视频
页面生命周期函数演示
注意看右边的控制台信息，来观看不同操作的区别
图文讲解
1.页面和组件周期函数共存的执行顺序
从此图可以看出来当在我们的项目中同时存在了页面和组件周期函数的时候的执行顺序是：
onLoad>onShow>onBeforeMount>onReady>onMounted
2.onReady
onReady是在组件挂载完成，页面初次渲染成功时触发方法，和组件的挂载后函数类似，但是共存时的执行顺序比组件的挂载函数要搞一些
3.onHide
onHide是在我们离开页面后执行的方法，然后在案例中我通过和onShow一起使用做了一个运行时间的暂停与恢复的效果，在我们的项目开发中可以通过这2个函数，来做一下类似如：从抖音切换到微信是抖音的视频暂停，在我们再次回到页面时在开始播放或者是点进了抖音商城去了暂停视频播放然后在回到视频区时恢复。注意：如果我们点击的时navgator跳转的话onHide和onShow就不起作用了
onUnload函数使用示例
<template>
<view class="">
<navigator url="/pages/demo4/demo4">跳转到demo4</navigator>
</view><template>
<view class="">
<navigator url="/pages/demo3/demo3">跳转到demo3</navigator>
<navigator open-type="reLaunch" url="/pages/demo3/demo3">跳转到demo3</navigator>
</view>
</template>
<script setup>
import {onUnload} from "@dcloudio/uni-app";
onUnload(()=>{
console.log("执行onUnload函数")
console.log("该页面已被删除");
//如在此可以编写释放占用的内存或者资源
})
</script>
<style lang="scss" scoped>
</style>
页面效果
onUnload函数演示
总结：从视频中我没可以看到点击没有添加open-type属性的navgator不会触发onUnload函数，当我们点击添加了open-type属性的navgator时会触发onUnload函数，并且，在视频中由于点击了两次没有open-type属性的navgator进行跳转页面，所以加上点击了有open-type属性的onUnload的进行跳转会触发3次onUnload函数，因为navgator默认没有添加open-type属性为其指定跳转方式时，默认的值是：navigate，所以它会缓存上一个页面，也就是说只要是有缓存的页面有多少个onUnload就会触发多少次。
onPageScroll使用示例
<template>
<view class="body">
<view v-for="item in 25" class="box">{{item}}</view>
</view>
<button class="fixedPosition" v-if="flag" @click="backToTop">⬆</button>
</template>
<script setup>
import {onPageScroll} from "@dcloudio/uni-app";
import { ref } from "vue";
const flag=ref(false);
onPageScroll((e)=>{
console.log(e.scrollTop);
flag.value=e.scrollTop>1000;
//页面滚动超过1000后显示我们的回到顶部
})
function backToTop(){
//点击事件，回到页面的顶部
uni.pageScrollTo({
scrollTop:0,duration:3000
})
}
</script>
<style lang="scss" scoped>
.body{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.box {
width: 200px;
height: 100px;
background: pink;
margin: 10px 10px;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 100px;
color: white;
}
.fixedPosition{
width: 50px;
height: 50px;
position: fixed;
right: 30px;
bottom: 30px;
background: green;
border-radius: 50%;
text-align: center;
line-height: 50px;
color: white;
}
</style>页面效果
总结：我们可以在onPageScroll函数里面写像这样，当滚动达到页面的一定的垂直距离的时候显示一个回到顶部按钮，点击按钮时通过uni.pageScrollTo来设置页面回到顶部
扫一扫
3672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
