性能优化-懒加载

图片懒加载（插件）

import { useIntersectionObserver } from "@vueuse/core";

export let imgLazyPlugin = {
  install: (app: any) => {
    // 在这里编写插件代码
    app.directive("lazy-img", {
      mounted(el: any, binding: any) {
        const { stop } = useIntersectionObserver(
          el, // 监听元素
          ([{ isIntersecting }]) => {
            // 图片进入可视区域
            if (isIntersecting) {
              el.src = binding.value;
              stop();
            }
          }
        );
      },
    });
  },
};

使用:

第一步：

第二步:

数据懒加载（hooks）

import { useIntersectionObserver } from "@vueuse/core";
import type { Ref } from "vue";

export const observeDomAndCallFunction = (
  domElement: Ref<HTMLElement | null>,
  callbackFunction: () => void
) => {
  const { stop } = useIntersectionObserver(
    domElement,
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        callbackFunction();
        stop();
      }
    }
  );
};

使用: