vue3+ts+IntersectionObserver实现图片懒加载

<template>
  <div>
      <div v-for="item,index in data" :key="item.id">
        <img :data-img="item.img" :data-key="index" :data-lazy-img-list="index" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick ,onMounted} from 'vue';
const data=[{
		img: 'https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg',
		title: '36分钟,深圳平均通勤时间出炉!GDP10强城市中仅输杭州',
		evaluate: (Math.random() * 10).toFixed(2),
		collection: (Math.random() * 100).toFixed(2),
		price: (Math.random() * 10).toFixed(2),
		monSales: (Math.random() * 20).toFixed(2),
		id: 1,
		loading: true,
	}]

const lazyImg = (el: any, arr: any) => {
  const io = new IntersectionObserver((res) => {
    res.forEach((v: any) => {
      if (v.isIntersecting) {
        const { img, key } = v.target.dataset;
        v.target.src = img;
        v.target.onload = () => {
          io.unobserve(v.target);
          arr[key]['loading'] = false;
        };
      }
    });
  });
  nextTick(() => {
    document.querySelectorAll(el).forEach((img) => io.observe(img));
  });
};
onMounted(() => {
    lazyImg('[data-lazy-img-list]',data)
})

</script>

<style scoped></style>