Vue3解决懒加载

1.npm i @vueuse/core 或者 yarn add @vueuse/core 2. 创建公共方法文件夹 src/hooks / index.js建议起名

// 按需引入懒加载
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export const useLazyData = (apiFn) => {
  const result = ref([]) // 数据对象存储
  const target = ref(null) // dom对象

// 停止观察                                                          
  const { stop } = useIntersectionObserver( target,  ([{ isIntersecting }], observerElement) => {
    if (isIntersecting) {
      stop()
      // 调用API获取数据
      apiFn().then(data => {
        result.value = data.result
      })
    }
  },
  // 配置交互为0就触发加载
  {
    threshold: 0
  })
  // 返回 --> 数据,和dom对象 
  return { result, target }
}

-- 以上部分是封装的懒加载函数 --

-- 下面的是使用 --
// 在需要懒加载的模块引入懒加载
import { useLazyData } from '@/hooks'
export default {
    给需要懒加载的dom绑定ref =“target”
    // 补充一点如果需要传值的接口需要useLazyData(() => findNew(传参))
    const {result, target} = useLazyData(findNew) (api接口)
    return {goods（这是我循环的数据列表） : result, target}  
    如果你循环的数据就是result就不需要 goods 这个
}