vue3组件数据懒加载，进入可视区加载数据

说明：有时在日常开发中，如果浏览器访问的页面数据过多（比如是些电商平台，数据比较多），为减少并发量，减少系统资源的消耗，这时候就需要用到懒加载，实现当组件进入浏览器窗口可视区后再去发请求加载数据。

演示：

首先安装vueuse hooks插件

npm i @vueuse/core

封装hooks函数 数据懒加载函数useLazyData

import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
// 数据懒加载函数
export const useLazyData = (apiFn:Function) => {
  // console.log(apiFn);
  const target = ref(null)
  const result = ref<Song[]>([])
  // stop 停止观察
  const { stop } = useIntersectionObserver(
    // 监听的目标元素
    target,
    ([{ isIntersecting }], observerElement) => {
      if (isIntersecting) {
        // isIntersecting 是否进入可视区
        stop()
        // 调用API获取数据
        apiFn().then((data:any) => {
          result.value = data.data.result.songs
        })
      }
    },
    //配置选项，只有相交的比例大于0就触发
    {
      threshold: 0
    }
  )
  // 返回 ==>数据（dom,后台的数据）
  return { target, result }
}

组件中使用hooks函数

<script lang="ts">
//请求api
import { getsong } from './server/goods'
//引入数据懒加载函数hook
import { useLazyData } from './hooks'
export default{
  setup(){
    const { target, result } = useLazyData(()=>getsong('最美的太阳'))
    return { song: result, target }
  }
}
</script>

<template>
  <div style="height: 1000px;background-color: #152acc2b;">内容内容</div>
  <ul ref="target">
    <li v-for="item in song" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<style scoped></style>