vue3 设置 表单或者页面 懒加载 （或者组件的异步加载）

用到的工具库  vueUse 和 useIntersectionObserver

1.UseIntersectionObserver 函数参数：

observerList： 由被观察目标所组成的数组，数组项是由React.createRef构建出来的对象

callback: 当目标元素被曝光所需要触发的函数，该函数接受一个参数indexList，由被曝光元素在observerList数组中的索引组成

infinite：是否持续观察目标元素，默认值为false。（因为曝光打点一般只需上报一次）

opt：可以自定义曝光条件（值的构成参考MDN），默认为{ threshold: [1] }，只有当目标元素完全暴露在可视区内才触发回调

2.UseIntersectionObserver 返回值:

返回一个数组，数组的第一项元素由React的useState所返回。

 

示例：

npm i @vueuse/core
import { useIntersectionObserver } from '@vueuse/core'

const roomPhoto = ref<any>(null)
const  targetIsVisible= ref(false) 
const { stop } = useIntersectionObserver( roomPhoto, ([{ isIntersecting }], observerElement) => {

　　　　targetIsVisible.value = isIntersecting }, )
)

<div ref='target'> <C v-if='targetIsVisible'></C> </div>