当前位置：首页 > news >正文

Vue3

news 2026/6/10 15:42:25

Untitled

Vue3实战学习¶

defineExpose¶

1.1defineExpose简介:¶

defineExpose 是显式暴露子组件属性或方法给父组件，简单说defineExpose就像一个门一样，可以让父组件通过ref去访问子组件的指定内容

1.2defineExpose核心总结¶

1.作用:在 script setup 中，子组件默认不对外暴露内部变量(方法),而defineExpose可以主动开放指定内容,父组件只需ref即可调用属性方法 2.使用步骤:子组件用defineExpose({ 要暴露的内容 }) 声明公开,父组件给子组件一把钥匙ref，通过ref.value访问子组件暴露的内容（注意）：如果要暴露响应式那就要用.value

1.3defineExpose案例¶

In [ ]:

<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>

In [ ]:

<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 简单案例¶

In [ ]:

<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 案例¶

In [ ]:

<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>