defer 优化白屏

useDefer.js

import { onMounted, ref } from 'vue';

export function useDefer(maxCount = 100) {
  const frameCount = ref(0);
  let rafId;

  function updateFrameCount() {
    rafId = requestAnimationFrame(() => {
      frameCount.value++;
      if (frameCount.value >= maxCount) {
        cancelAnimationFrame(rafId);
      }
      updateFrameCount();
    });
  }

  onMounted(() => {
    cancelAnimationFrame(rafId);
  });

  return function defer(n) {
    return frameCount.value >= n;
  };
}