解决页面上数据量过大、dom过多导致渲染卡顿的问题---DOM懒加载（vue3）

使用技术：Intersection Observer API

Intersection Observer API：这是一种新的浏览器 API，可以用于监听元素进入或离开视口。通过监听元素是否进入视口，我们可以判断何时加载元素。使用 Intersection Observer API 实现 DOM 懒加载非常简单，只需要创建一个观察器对象，并将需要观察的元素传递给它即可。

<template>
  <div>
    <div class="card px-10 mt-20" v-for="(item, index) in detailList" v-if="detailList.length > 0">
      <div class="flex flex-start gap-5 border-b py-5">
        <div class="w-2 h-10 mt-5 bg-[#FDCC0D]"></div>
        <div>{{ item.Question }}</div>
      </div>
      <v-md-preview :text="item.Answer" left-toolbar="undo redo | emoji" v-if="item.Answer != null && item.Answer != ''" class="mt-10 pb-10" ref="preview"></v-md-preview>
    </div>
  </div>
</template>

const previews:any = ref([])
onMounted(() => {
  const options = {
    rootMargin: '0px',
    threshold: 0.1,
  }

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const preview = entry.target
        preview.$refs.preview.init()
        observer.unobserve(preview)
      }
    })
  }, options)

  previews.value = document.querySelectorAll('.v-md-preview')
  previews.value.forEach((preview:any) => {
    observer.observe(preview)
  })
})