vue3使用 Intersection Observer API

Vue3中可以使用Intersection Observer API来实现懒加载、无限滚动等功能。

Intersection Observer API是一个用于观察目标元素是否进入视图区域的API。通过它，我们可以实现只在需要时才加载图片、分页加载等功能，避免了在页面加载时就请求所有资源，从而提高了页面的性能。

在Vue3中，可以使用`@intersect`指令来监听元素与视窗的交叉状态。例如：

<template>
  <div v-intersect="onIntersect">
    <!-- 目标元素 -->
  </div>
</template>

<script>
export default {
  methods: {
    onIntersect(entries) {
      // entries为交叉状态的集合
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 当目标元素进入视口时执行的操作
        }
      })
    }
  }
}
</script>

通过以上代码，可以监听目标元素与视窗的交叉状态，并在目标元素进入视口时执行相应的操作。