下面定义了一个懒加载的方法
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
// 数据懒加载函数
export const useLazyData =(apiFn)=>{
const result =ref([])
const target = ref(null)
const {stop} =useIntersectionObserver(target, ([{ isIntersecting }])=>{
if(isIntersecting){
stop()
apiFn().then(data=>{
result.value =data.result
console.log('result.value',result.value);
})
}
})
return {result,target}
}
问题描述
在使用了 以后页面不报错也不显示。
setup(){
const{ list,target }= useLazyData(findHot)
return { list,target }
}
原因分析:解构赋值的时候变量名要一一对应
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
// 数据懒加载函数
export const useLazyData =(apiFn)=>{
const result =ref([])
const target = ref(null)
const {stop} =useIntersectionObserver(target, ([{ isIntersecting }])=>{
if(isIntersecting){
stop()
apiFn().then(data=>{
result.value =data.result
console.log('result.value',result.value);
})
}
})
return {result,target} //这里是result
}setup(){
const{ list,target }= useLazyData(findHot) //这里也应该是result
return { list,target }
}改完后的代码:
setup(){
const{ result,target }= useLazyData(findHot)
return { list:result,target }
}