关于vue.js: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 }
}

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

懒加载的益处:
页面加载速度快、能够加重服务器的压力、节约了流量,用户体验好