vue3实现图片列表懒加载的方式

在 Vue 3 中实现图片列表懒加载的方式可以使用 Intersection Observer API，该 API 可以监听元素是否进入可视区域。以下是实现步骤：

1. 在图片组件中添加 ref 属性，在组件挂载时获取该组件的 DOM 节点。
2. 使用 Intersection Observer API 监听该节点是否进入可视区域。
3. 当节点进入可视区域时，将图片的 src 属性修改为真实的图片地址，实现懒加载。

示例代码如下：

<template>
  <div>
    <img ref="imgRef" :src="placeholderSrc" alt="placeholder" />
  </div>
</template>

<script>
export default {
  name: 'LazyImage',
  props: {
    src: {
      type: String,
      required: true
    },
    placeholderSrc: {
      type: String,
      required: true
    }
  },
  mounted() {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          this.$refs.imgRef.src = this.src;
          observer.unobserve(entry.target);
        }
      });
    });
    observer.observe(this.$refs.imgRef);
  }
};
</script>

在组件中，使用 placeholderSrc 属性来指定占位图片的地址，当图片进入可视区域时，将 placeholderSrc 属性替换为真实的图片地址即可。