解决页面上数据量过大、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=" > 0">
      <div class="flex flex-start gap-5 border-b py-5">
        <div class="w-2 h-10 mt-5 bg-[#FDCC0D]"></div>
        <div>{{  }}</div>
      </div>
      <v-md-preview :text="" left-toolbar="undo redo | emoji" v-if=" != null &&  != ''" 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) => {
    (entry => {
      if () {
        const preview = 
        preview.$()
        (preview)
      }
    })
  }, options)

   = ('.v-md-preview')
  ((preview:any) => {
    (preview)
  })
})