Vue3中封装一个数据懒加载共用函数，实现数据懒加载

需求：实现当组件进入可视区域加载数据

        使用@vuevuse/core中的useIntersectionObsercer来实现监听进入可视区域行为，但是必须配合vue3.0的组合API的方式才能实现

先来分析一下useIntersectionObserver 函数

 const {stop} = useIntersectionObserver(target, fn, options)
 1、参数一target表示被监听的DOM元素
2、参数二是回调函数，用于通知监听的动作（回调函数的第一个形参isIntersecting表示被监听的元素已经进入了可视区）
 3、表示配置选项
 stop 是停止观察是否进入或移出可视区域的行为    
const { stop } = useIntersectionObserver(
   target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
  target,
   isIntersecting 是否进入可视区域，true是进入 false是移出
   observerElement 被观察的dom
  ([{ isIntersecting }], observerElement) => {
     在此处可根据isIntersecting来判断，然后做业务
  },
)

封装数据懒加载公用函数

// 封装一个通用的方法实现数据的懒加载
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

export const useLazyData = (apiFn) => {
  // target表示组件的最外层div元素
  const target = ref(null)
  // 懒加载接口返回的数据
  const result = ref([])
  // 监听组件是否进入可视区
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    // 如果target对应的DOM进入可视区，那么该回调函数就触发
    if (isIntersecting) {
      // 被监听的DOM进入了可视区:此时调用接口获取数据；停止继续监听
      stop()
      apiFn().then(data => {
        result.value = data.result
      })
    }
  })
  // result表示接口懒加载获取的业务数据
  // target表示被监听的DOM元素，需要在模板中被ref属性绑定
  return { result, target }
}

 使用封装好的数据懒加载公式

<tempalte>
 <HomePanel title="人气推荐" sub-title="人气爆款 不容错过" ref='target'>

</tempalte>

import { findNew } from '@/api/home'
import { useLazyData } from '@/hooks'
export default {
  setup () {
   const { target, result: goods } = useLazyData(findNew)
   return { goods, target }
  }
}