vue3+TS 通过IntersectionObserver 获取某个元素是否在可视区域

你可以通过以下步骤在Vue3+TS中使用IntersectionObserver来判断元素是否在可视区域内：

1. 在Vue组件中，使用`ref`来获取需要监测的元素，例如：

<template>
  <div ref="box"></div>
</template>

2. 在`mounted`生命周期钩子中，实例化一个IntersectionObserver对象，并通过`observe`方法将需要监测的元素传入：

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const box = ref(null)

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          console.log('Box is visible')
        } else {
          console.log('Box is not visible')
        }
      })
    })

    observer.observe(box.value)

    return { box }
  },
})
</script>

这样，当元素进入或离开可视区域时，`IntersectionObserver`实例中的回调函数就会被触发，从而判断元素是否在可视区域内。