ref&$refs在VUE3、VUE2中的使用差别

为什么VUE3对ref="guessRef"的接收数据，不使用$refs.guessRef呢？而是可以直接使用 guessRef.value?.getMore()？

在这段代码中，`ref="guessRef"`是用于给组件添加一个引用，可以通过`this.$refs.guessRef`来获取该引用。但是在Vue 3中，使用了Composition API，`$refs`已经被废弃，不再建议使用。

在Composition API中，我们可以使用`ref`函数来创建一个响应式数据，并通过`.value`来获取或修改该值。在代码中，`guessRef`就是通过`ref`函数创建的一个响应式引用。

通过`guessRef.value`可以获取到该引用所引用的实际值。由于`getMore()`是一个可选的异步方法，通过`guessRef.value?.getMore()`的方式，可以避免在引用为空时引发的错误。

所以，在这段代码中，`guessRef.value?.getMore()`是获取`guessRef`引用所指向的实例对象，并调用该对象的`getMore()`方法。

<script>
const isTriggered = ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开始动画
  isTriggered.value = true
  // 加载数据
  // await getHomeBannerData()
  // await getHomeCategoryData()
  // await getHomeHotData()
  // 重置猜你喜欢组件数据
  guessRef.value?.resetData()
  await Promise.all([
    getHomeBannerData(),
    getHomeCategoryData(),
    getHomeHotData(),
    guessRef.value?.getMore(),
  ])
  // 关闭动画
  isTriggered.value = false
}
</script>

<template>
  <view class="viewport">
    <!-- 自定义导航栏 -->
    <CustomNavbar />


    <!-- 滚动容器 -->
    <scroll-view
      enable-back-to-top
      refresher-enabled
      @refresherrefresh="onRefresherrefresh"
      :refresher-triggered="isTriggered"
      @scrolltolower="onScrolltolower"
      class="scroll-view"
      scroll-y
    >
    <!--scroll-y y轴方向滚动  @scrolltolower滚动条触底触发 -->
      <PageSkeleton v-if="isLoading" />
      <template v-else>
       
        <!-- 猜你喜欢 -->
        <XtxGuess ref="guessRef" />
      </template>
    </scroll-view>
  </view>
</template>