关于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,不然会呈现在更新数据源的时候，数据更新图片被缓存不更新的状况**