解决Vue3，使用@vueuse/core监听DOM元素进入可视区域

// npm i @vueuse/core
import {ref} from 'vue'
<script>
    setup() {
    //ref挂载到要被监听的DOM元素上
    const target = ref(null)

    import {useIntersectionObserver} from '@vueuse/core'

	//调用这个函数useIntersectionObserver，里面传三个参数

    // 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为）
    // 2. target 是观察的目标容器 dom对象 | 组件对象
    // 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出
    const { stop } = useIntersectionObserver(
          target,// target 是vue的对象引用。是观察的目标
         // isIntersecting 是否进入可视区域，true是进入 false是移出
 		 // observerElement 被观察的dom
          ([{ isIntersecting }], observerElement) => {
            if (isIntersecting) {
              stop()
            }
          },
          // threshold 表示观察的目标进入视口的比例，取值范围是从 0 到 1
          // 默认是0.1。 值越大表示观察越不灵敏
          { threshold: 0 }
        )
    
    }
</script>