Vue3

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>

 

 

页面效果就是当页面滚动距离超过 50px，导航栏会固定在顶部；滚动距离不足时，恢复到原位置。关闭返回页面时，控制台onUnload 触发，定时器被清理，控制台打印 “页面卸载，资源已清理”。