页面有多个列表，不同的接口在同一个页面中展示，如何优化（针对PC与H5）

@vueuse/core插件

1. 官网：vueuse.org/

使用与安装

// 安装 npm i @vueuse/core

<template>
  <view class="consult_recommend">
    <PanelVue title="推荐新闻" ref="articleVisibleRef">
      <template v-if="articleVisible">
        <NewList :list="promoteData" />
        <NewList :list="allPromoteData" />
      </template>
    </PanelVue>

    <view style="height: 40rpx"></view>

    <panelVue title="推荐供应商" ref="supplierVisibleRef">
      <template v-if="supplierVisible">
        <SupplyChainList :list="supplierList" />
        <SupplyChainList :list="supplierList2" />
      </template>
    </panelVue>

    <view style="height: 40rpx"></view>

    <panelVue title="推荐产品" ref="productListRef">
      <template v-if="productVisible">
        <ProductList :list="productList" />
        <ProductList :list="productList2" />
      </template>
    </panelVue>
  </view>
</template>
<script setup lang="ts">
import { useIntersectionObserver } from '@vueuse/core'  //引入

// 异步加载组件
const NewList = defineAsyncComponent(() => import('./components/NewList.vue'))
const ProductList = defineAsyncComponent(() => import('./components/ProductList.vue'))
const SupplyChainList = defineAsyncComponent(() => import('./components/SupplyChainList.vue'))

const articleVisible = ref(false)
const articleVisibleRef = ref(null)
const supplierVisible = ref(false)
const supplierVisibleRef = ref(null)
const productVisible = ref(false)
const productListRef = ref(null)

useIntersectionObserver(articleVisibleRef, ([{ isIntersecting }]) => {
  if (isIntersecting) {
    articleVisible.value = isIntersecting
  }
})
useIntersectionObserver(supplierVisibleRef, ([{ isIntersecting }]) => {
  if (isIntersecting) {
    supplierVisible.value = isIntersecting
  }
})
useIntersectionObserver(productListRef, ([{ isIntersecting }]) => {
  if (isIntersecting) {
    productVisible.value = isIntersecting
  }
})
</script>

@vueuse/core插件中 useIntersectionObserver 方法

1. useIntersectionObserver方法的作用：监听进入可视区域行为（也就是articleVisibleRef是否在用户可视化区域内）。
2. 可用于监听用户进入到可视化区域内再进行加载数据。这也是性能优化的一点。