Vue3组件数据懒加载

• 单张页面数据较多时，可以使用组件数据懒加载，减少网络请求，提高页面的响应速度。

1. 安装npm i @vueuse/core -S 库，用到其中的 useIntersectionObserver 来实现监听进入可视区域行为，配合vue3.0的组合API的方式实现。
2. 封装方法 index.js

//提供复用逻辑
import { useIntersectionObserver } from "@vueuse/core"
import {ref} from 'vue'
// 数据懒加载函数
// target 要监听的 Dom 对象
// apiFn API函数
export const useLazyData = (apiFn) => {
    const result = ref([])
    const target=ref(null)
    
    const { stop } =useIntersectionObserver(
        target,
        ([{ isIntersecting }], observerElement) => {
            console.log(observerElement);
            //isIntersecting是否进入可视区
            if (isIntersecting) {
                stop()//停止观察
                //调用api函数获取数据
                apiFn().then(data => {
                    result.value=data
                })
            }
        },
        // 配置选项
        {
            threshold:0  //冒出之后就触发
        }
    )
    return {result,target}
}

3. 调用方法

   导入封装的 index.js 文件 import { useLazyData } from 'index.js'
   在需要懒加载数据的组件上加入ref <myComponent ref='target' />

   setup(){ 
   	const { target,result } =useLazyData( FnApi ) //FnApi 请求函数
   	return { target , result }
   }