数据懒加载

基于vueuse

实现当组件进入可视区域在加载数据

import {useIntersectionObserve} from "@vueuse/core"
import {ref} from "vue"

export const useLazyData = (apiFn) =>{
	const result = ref([])
	const target = ref(null)
	const {stop} = useIntersectionObserve(target,
		([{isIntersecting}],observerElement)=>{
			if(isIntersecting){
				stop()
                apiFn().then(data=>{
                    result.value = data.result
                })
			}
		},
        {threshold:0}                                  
	)
    return {result,target}
}

参数解释

• apiFn 请求接口函数
• target 监听的目标元素
• isIntersecting 是否进入可视区域标志
• stop stop是赋予的监听事件函数 stop() 停止监听
• threshold 相交点，就是进入多少范围的视口算进入可视区

使用

<template>
	<div ref="target">
        <div v-for=" i in data"></div>
    </div>
</template>

<script>
import {useLazyData} from "@/hooks/index"
export default{
    setup(){
        const {target,result} = useLazyData(findNew)
        return {goods:result,target}
    }
}
</script>

target 的使用可以是传递进 target 作为监听事件，也可以是使用调用函数的返回值挂载到 标签 中