vue3中的数据懒加载

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

使用 @vueuse/core中的 useIntersectionObserver来实现监听进入可视区域行为.

vueuse它是为Vue 2和Vue 3服务的一套Vue Composition API的常用工具集，是目前世界上Star最高的同类型库之一。它的初衷就是将一切原本并不支持响应式的JS API变得支持响应式，省去程序员自己写相关代码。
具体实践如下

// 提供复用逻辑的函数（钩子）  数据懒加载

import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
/**
 * 数据懒加载函数
 * @param {object} target  --DOM对象
 * @param {function} apiFn ---API函数
 *
 */
export const useLazyData = (apiFn) => {
  const result = ref([])
  const target = ref(null)
  // stop停止观察
  const { stop } = useIntersectionObserver(
    // 监听目标元素
    // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
    target,
    // isIntersecting 是否进入可视区域，true是进入 false是移出
    // observerElement 被观察的dom
    ([{ isIntersecting }], observerElement) => {
      // 在此处可根据isIntersecting来判断，然后做业务
      if (isIntersecting) {
        // console.log('进入可是去')
        stop()
        // 调用API 函数获取数据
        apiFn().then(data => {
          result.value = data.result
        })
      }
    }
  )
  return { result, target }
}

二 ：在组件中引入 看注释