Vue3
Vue3实战学习¶
defineExpose¶
1.1defineExpose简介:¶
defineExpose 是显式暴露子组件属性或方法给父组件,简单说defineExpose就像一个门一样,可以让父组件通过ref去访问子组件的指定内容
1.2defineExpose核心总结¶
1.作用:在 script setup 中,子组件默认不对外暴露内部变量(方法),而defineExpose可以主动开放指定内容,父组件只需ref即可调用属性方法 2.使用步骤:子组件用defineExpose({ 要暴露的内容 }) 声明公开,父组件给子组件一把钥匙ref,通过ref.value访问子组件暴露的内容 (注意):如果要暴露响应式那就要用.value
1.3defineExpose案例¶
<template>
<div>子组件计数:{{ count }}</div>
</template>
<script setup>
import{ ref } from'vue';
// 内部状态(默认私有)
const count = ref(0);
// 内部方法(默认私有)
const increment = () => {
count.value++;
};
const reset = () => {
count.value = 0;
};
// 显式暴露给父组件的内容
defineExpose({
count,
increment,
reset
});
</script>
<template>
<div>
<h3>父组件</h3>
<!--子组件,绑定ref-->
<Counter ref="counterRef" />
<!--父组件控制按钮-->
<button @click="callChildIncrement">父组件触发子组件+1</button>
<button @click="callChildReset">父组件触发重置</button>
<p>父组件读取子组件计数:{{ counterRef?.count }}</p>
</div>
</template>
<script setup>
import{ ref } from'vue';
importCounter from'./Counter.vue';
// 子组件实例的ref
const counterRef = ref(null);
// 父组件调用子组件方法
const callChildIncrement = () => {
if (counterRef.value) {
counterRef.value.increment();
}
};
const callChildReset = () => {
if (counterRef.value) {
counterRef.value.reset();
}
};
</script>
页面生命周期的 onShow 和 onHide 钩子¶
2.1 onShow 和 onHide¶
1.这两个的核心是页面的 “显示 / 隐藏” 状态切换时的触发逻辑 2.首先说onShow: onShow是页面被显示的时候,比如首次打开软件,其他页面返回跳转都会触发onShow,onShow可以多次触发,所以它就可以刷新数据,恢复页面状态,就跟我们软件下拉刷新一样。 而相反的onHide就是页面被隐藏时才会触发,也是一样可以多次触发,它可以暂停操作,比如暂停视频
2.2 onShow 和 onHde 执行顺序¶
我们就以‘页面 A → 页面 B → 返回 A’为例 打开 A:onLoad → onReady → onShow 从 A 跳 B:A 执行onHide → B 执行onLoad→onReady→onShow 从 B 返回 A:B 执行onUnload → A 执行onShow (其中onUnload作用是离开这个B页面时执行清理任务就是清理缓存数据等)
2.2 简单案例¶
<template>
<view>
<text>当前计数:{{ count }}</text>
<button @click="gotoOtherPage">跳转到其他页面</button>
</view>
</template>
<script setup>
import{ ref } from'vue';
import{ onShow, onHide, navigateTo } from'@dcloudio/uni-app';
const count = ref(0);
// onShow:页面显示时触发(首次+返回后)
onShow(() => {
console.log('页面显示了,刷新计数~');
count.value++; // 每次显示,计数+1
});
// onHide:页面隐藏时触发(跳转/切后台)
onHide(() => {
console.log('页面隐藏了,暂停操作~');
});
// 跳转到其他页面
const gotoOtherPage = () => {
navigateTo({ url: '/pages/other/other' });
};
</script>
我们会发现打开了首页count变为1就代表onShow触发了 点击 “跳转”当前页执行onHide,跳转到新页面 从新页面返回当前页的onShow再次触发,count变为 2
onUnload(页面卸载)和 onPageScroll(监听页面滚动)¶
3.1onUnload¶
正如我上面案例所说的onUnload,它是在页面被销毁关闭时清理资源(比如取消接口请求、销毁定时器)、释放内存。它只会触发一次.这个算是一个比较简单的生命周期
3.2 onPageScroll¶
onPageScroll也好理解,在Vue3中Scroll是滚动的组件,所以这个生命周期只要在页面滚动的时候就会触发,主要用来实现滚动的交互等(比如显示 / 隐藏导航栏、懒加载提高性能等)
3.3 案例¶
<template>
<view class="long-page">
<view class="nav" :style="{ top: navTop + 'px' }">滚动时导航栏会固定</view>
<view v-for="i in 50" :key="i">第{{ i }}段内容</view>
</view>
</template>
<script setup>
import{ ref } from'vue';
import{ onUnload, onPageScroll } from'@dcloudio/uni-app';
// 导航栏距离顶部的距离(控制固定)
const navTop = ref(0);
// 模拟定时器(用于onUnload清理)
const timer = setInterval(() => console.log('定时器运行中'), 1000);
// 1. 监听页面滚动
onPageScroll((e) => {
// e.scrollTop是页面滚动的距离(单位px)
// 当滚动超过50px时,导航栏固定在顶部
navTop.value = e.scrollTop > 50 ? 0 : 50;
});
// 2. 页面卸载时清理资源
onUnload(() => {
clearInterval(timer); // 清理定时器
console.log('页面卸载,资源已清理');
});
</script>
<style>
.long-page {
height: 2000rpx;
}
.nav {
position: fixed;
top: 50px;
left: 0;
width: 100%;
height: 40px;
background: #fff;
border-bottom: 1px solid #eee;
transition: top 0.3s;
}
</style>
页面效果就是当页面滚动距离超过 50px,导航栏会固定在顶部;滚动距离不足时,恢复到原位置。关闭返回页面时,控制台onUnload 触发,定时器被清理,控制台打印 “页面卸载,资源已清理”。

浙公网安备 33010602011771号