组件数据懒加载---vueusehook使用(useIntersectionObserver)

原因:点击网站 一股脑发送请求全部渲染 浪费性能

解决:可见区域发送请求 不可见不发送

我们可以使用 @vueuse/core 中的 useIntersectionObserver 来实现监听组件进入可视区域行为，需要配合vue3.0的组合API的方式才能实现

封装为hook

import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue-demi'
export function useIntersection (reqFn) {
  //观察的dom元素 用ref获取
  const target = ref()
  //调用vueuse方法观察是否进入可视区域
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        console.log('进入可视区')
        //调用获取数据方法
        reqFn()
        //停止监听 不然每次出去进入都监听
        stop()
      }
    },
    // 进入当前元素可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
    { threshold: 0 }
  )
  return { target }
}
​