组件数据懒加载

组件数据懒加载-基本使用

问题：
电商类网站，尤其是首页，内容有好几屏，而如果一上来就加载所有屏的数据，并渲染所有屏的内容会导致首页加载很慢
可以，通过useIntersectionObserver优化新鲜好物和人气推荐模块，实现数据懒加载
数据懒加载：等组件正式进入到可视区中时，才把组件内部的ajax请求发起，否则不请求数据

import { onMounted, ref } from "vue";
import { useIntersectionObserver } from "@vueuse/core";
const target = ref(null);
onMounted(() => {
  const { stop } = useIntersectionObserver(
    target.value,
    ([{ isIntersecting }]) => {
      console.log("新鲜好物", isIntersecting);
      //  可见
      if (isIntersecting) {
        // 发请求
        home.getNewList()
        // 停止监听
        stop();
      }
    }
  );
});

组件数据懒加载-封装

封装组件数据懒加载可复用的逻辑

首页中，很多地方都应该使用组件数据懒加载这个功能，不管是哪个模块使用，下面代码都会重复书写
事实上，唯一可能会随着业务使用发生变化的是 ajax接口的调用
其余的部分我们进行重复使用，抽离为可复用逻辑
核心代码：

封装通用的懒加载数据api src/utils/hooks.ts

import { useIntersectionObserver } from "@vueuse/core";
import { onMounted, ref } from "vue";

export function useLazyData(fn: () => void) {
  const target = ref(null);
  onMounted(() => {
    const { stop } = useIntersectionObserver(
      target.value,
      ([{ isIntersecting }]) => {
        //  可见
        if (isIntersecting) {
          // 发请求
          fn()
          // 停止监听
          stop();
        }
      }
    );
  });
  return target
}

使用传参

const target= useLazyData(()=>{
  home.getHotList(); //不同调用的axios 传参过去
})