关于解构赋值和vue3中的useIntersectionObserver

 下面定义了一个懒加载的方法

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 }

    }