vue 第三方方法 useIntersectionObserver 实现数据懒加载

背景

在开发网站的时候，有时候一个页面的数据会很多，一次性加载会降低性能，加载速度缓慢，其实只要让可视窗口里面的数据加载即可，当页面部分内容还没有进入可视区域的时候，可以先不用加载数据，一旦进入可视区域通过事件监听元素位置进而选择数据加载的时机，这样做的好处就在于可以增强性能，避免没有必要的请求

在 vue 项目中还有第三方方法可以帮助我们进行数据懒加载

落地代码

@vueuse/core 为我们提供的 useIntersectionObserver 方法

import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export const useLazyData = apiFn => {
  const result = ref([])
  const target = ref(null)
  // 第一个参数：ref引用，获取DOM
  // 第二个参数：回调，回调里面的参数 isIntersecting 会在参数一获取的 DOM 元素进入可视区域的时候监听并且为 true
  // 第三个参数：DOM 元素进入可视区域的距离 从 0 - 1
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        stop()
        apiFn().then(data => {
          result.value = data.result
        })
      }
    },
    {
      threshold: 0
    }
  )
  // 返回两个值 result 返回的是调用接口返回的后台的数据
  // target 用来实现 ref 引用
  return { result, target }
}

导出使用 useLazyData 方法，该方法接收一个参数：接口函数名