Vue3.0 使用@vueuse/core工具库实现页面数据（请求）懒加载效果

1. 下包 使用 npm 或者 yarn 下载 yarn add @vueuse/core

2. 引入工具库懒加载函数 import { useIntersectionObserver } from '@vueuse/core'

3. 使用工具函数

// stop 是停止观察是否进入或移出可视区域的行为    
const { stop } = useIntersectionObserver(
  // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
  target,
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom
  ([{ isIntersecting }], observerElement) => {
    // 在此处可根据isIntersecting来判断，然后做业务
  },
)

4. 一般懒加载是多出使用的，我们定义一个全局js文件然后到组件引入即可正常使用

1. 导出一个全局工具函数，其中有两个参数，一个target为需要观察的dom元素 api 是请求工具函数


import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
// 懒加载函数

// stop 是停止观察是否进入或移出可视区域的行为
export const useLazyData = (target, api) => {
  const list = ref([])

  // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
  const { stop } = useIntersectionObserver(
    target,
    // isIntersecting 是否进入可视区域，true是进入 false是移出
    // observerElement 被观察的dom
    ([{ isIntersecting }], observerElement) => {
      if (isIntersecting) {
        stop()
        api().then(res => {
          list.value = res.result
        })
      }
    }, {
      // threshold 容器和可视区交叉的占比（进入的面积/容器完整面试） 取值，0-1 之间，默认比0大，
      // 所以需要滚动较多才能触发进入可视区域事件。
      // 如果盒子本身很大，使用默认设置的比例后，就需要盒子进入可视区一定的范围后才会加载数据，体验不好
      threshold: 0
    }
  )
  return list
}

2. 在vue组件内部导入懒加载函数

setup () {
    // target是ref绑定dom元素的，findHot是API接口（直接把接口请求函数传过去，如果需要带参数也可以）
    const target = ref(null)
    const goods = useLazyData(target, findHot)  // 不传参写法
    const goods = useLazyData(target, ()=> findHot(10,20))  //传参写法

    return { goods, target }
  }