图片懒加载的指令（v3）

   import defaultImg from '@/assets/images/200.png'
   const app = createApp(App)
    app.directive('lazy', {
      // 在绑定元素的父组件挂载之后调用
      mounted (el, binding) {
        const observer = new IntersectionObserver(
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
            当图片加载不出时，加载默认图片
              el.onerror = function () {
                el.src = defaultImg
              }
              el.src = binding.value
              observer.unobserve(el)
            }
          },
          {
            threshold: 0.01
          }

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

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