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

399 阅读1分钟

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 方法,该方法接收一个参数:接口函数名