关于vue3:Vue中使用图片懒加载以及注意要点

外围代码

import {useIntersectionObserver} from "@vueuse/core";
// 图片懒加载
export const lazyPlugin = {install(app) {
    // 自定义指令：app.directive("img-lazy", {mounted(el, binding) {const { stop} = useIntersectionObserver(
          el,
          ([{isIntersecting}], observerElement) => {if (isIntersecting) {
              // 图片进入视觉入口了
              el.src = binding.value;
              stop();}
          }
        );
      },
    });
  },
};

应用

<img v-img-lazy="baseUrl + item.url" alt="":key="item.url" />

要点：

** 肯定要加上:key, 不然会呈现在更新数据源的时候，数据更新图片被缓存不更新的状况 **