Vueuse包提供的useIntersectionObserver 方法如何使用（参数；返回值）

---

 const {stop} = useIntersectionObserver(target, fn, options)

1、参数一target表示被监听的DOM元素

2、参数二是回调函数，用于通知监听的动作（回调函数的第一个形参isIntersecting表示被监听的元素已经进入了可视区）

3、参数三 表示配置选项

stop 是停止观察是否进入或移出可视区域的行为

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

业务功能场景

基于该方法实现组件的懒加载

第一步:在SRC下封装一个钩子函数,src/hooks/index.js文件夹下;
代码如下:

// 封装一个通用的方法实现数据的懒加载
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

export const useLazyData = (apiFn) => {
  // target表示组件的最外层div元素
  const target = ref(null)
  // 懒加载接口返回的数据
  const result = ref([])
  // 监听组件是否进入可视区
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    // 如果target对应的DOM进入可视区，那么该回调函数就触发
    if (isIntersecting) {
      // 被监听的DOM进入了可视区:此时调用接口获取数据；停止继续监听
      stop()
      apiFn().then(data => {
        result.value = data.result
      })
    }
  })
  // result表示接口懒加载获取的业务数据
  // target表示被监听的DOM元素，需要在模板中被ref属性绑定
  return { result, target }
}

第二步:在所需要的文件夹中导入
例如:

懒加载的好处:
页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好