vue3实现组件数据懒加载

1.什么是组件数据懒加载

组件数据懒加载指的是当组件进入可视区域后在加载数据，可以使页面数据加载更快和节约资源

2.组件数据懒加载主体思路

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

3.项目中代码实现

3.1.首先新建单独文件夹存放数据懒加载方法hooks/index.vue

// 提供复用逻辑的函数
import { useIntersectionObserver } from '@/vuese/core'
import { ref } from 'vue'

/**
 * 数据懒加载函数
 * @param {target} target 监听的目标元素，必须是DOM对象
 * @param {apiFn}   api函数,需要懒加载的请求
 * @returns 
 */
export const uselazyData = (target, apiFn) => {
  const result = ref(null);
  const { stop } = useIntersectionObserver(
    target, // 监听的目标元素
    ([{ isIntersecting }]) => {
      // 是否进入可视区
      if (isIntersecting) {
        stop() // 停止监听
        // 调用API函数获取数据
        apiFn().then(data => {
          result.value = data.result
        })
      }
    },
    {
      threshold: 0
    }
  )
  return result
}

3.2 在需要进行懒加载的文件中导入

<div ref="target">


import { findNew } from "@/api/home.js";
import { uselazyData  } from "@/hooks/index.js"
setup() {
    // 获取新鲜好物数据
    const target = ref(null); // 获取需要懒加载数据的DOM
    const result =  uselazyData(target, findNew)
    return {goods:result, target };