VueUse实现懒加载

vue3.0的工具库VueUse 我们使用 useIntersectionObserver来实现懒加载的效果
当被监视的元素出现在可视区域,则立即执行函数

// hooks 封装逻辑，提供响应式数据。
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
// 数据懒加载函数
export const useLazyData = (fn) => {
  // 需要
  // 1. 被观察的对象
  // 2. 不同的API函数
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    // dom
    target,
    ([{ isIntersecting }], observerElement) => {
      console.log(isIntersecting, 2222)
      if (isIntersecting) {
        stop()
        // 调用API获取数据
        fn && fn()
      }
    }
  )
  // 返回--->数据（dom,后台数据）
  return target
}

下面是再vue3中定义的自定义指定,使用了浏览器提供的IntersectionObserverAPI
根据ref获取dom的时候,需要在onMounted的时候去获取 而且要加.value

// 创建观察对象实例
const observer = new IntersectionObserver(callback[, options])
// callback 被观察dom进入可视区离开可视区都会触发
// - 两个回调参数 entries , observer
// - entries 被观察的元素信息对象的数组 [{元素信息},{}]，信息中isIntersecting判断进入或离开
// - observer 就是观察实例
// options 配置参数
// - 三个配置属性 root rootMargin threshold
// - root 基于的滚动容器，默认是document
// - rootMargin 容器有没有外边距
// - threshold 交叉的比例

// 实例提供两个方法
// observe(dom) 观察哪个dom
// unobserve(dom) 停止观察那个dom

IntersectionObserver
用途：无限滚动、图片懒加载、控制动画/视频执行（性能优化）
作用： 观察一个元素是否在视口可见
使用场景：判断某个元素是否进入了视口，传统的实现方法是，监听scroll事件，调用目标元素的getBoundingClientRect()方法，得到对于视口左上角的位置，再去判断是否在视口之内，缺点是由于scroll事件频发，计算量很大，容易造成性能问题
IntersectionObserver浏览器提供的原生方法，可以自动观察元素是否可见

 app.directive('lazy', {
      mounted (el, binding) {
        // 浏览器提供 IntersectionObserver API
        const observer = new IntersectionObserver(
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              console.log(el, binding, 1111)
              // 图片加载失败就显示默认图片
              el.onerror = function () {
                el.src = defaultImg
              }
              el.src = binding.value
              // 不在监听dom=====stop()
              observer.unobserve(el)
            }
          },
          {
            threshold: 0.01
          }
        )
        // 监听dom
        observer.observe(el)
      }
    })