useIntersectionObserver-组件数据懒加载

1.可以直接看官方文档useIntersectionObserver | VueUsehttps://vueuse.org/core/useintersectionobserver/

2.使用

//代表被观察的元素
<div ref="target">
  <h1>Hello world</h1>
</div>

// 先引入函数
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

// 传入调用接口的函数
export const useLazyData = (apiFn) => {
    // 观测的dom容器--必须是dom容器-而且是vue3.0绑定的
    const target = ref(null);
    // 获取得到的数据
    const result = ref([]);
    //stop是停止观察是否进入或移出可视区域的行为
    const { stop } = useIntersectionObserver(
        target,
//isIntersecting--表示是否进入可视区域
        ([{isIntersecting}], observerElement) => {
            if(isIntersecting) {
                stop()
                //   进入可视区后可以做业务--此处为传入的函数
                apiFn().then(res=>{
                    result.value = res.result
                })
            }
        }
    )
    return { target , result }
}