vue3 白屏优化 防止组件一次性渲染太多

import { ref } from 'vue'

export function useDefer(maxFrameCount = 1000):(showInframeCount: number) => boolean {
  // 当前渲染帧
  const frameCount = ref(0)
  const refreshFrameCount = () => {
    requestAnimationFrame(() => {
      // 每次渲染时帧数值+1
      frameCount.value += 1
      // 如果没有超过最大值就渲染
      if (frameCount.value < maxFrameCount) {
        refreshFrameCount()
      }
    })
  }
  refreshFrameCount()
  // 判断当前渲染有没有渲染到，如果渲染到了就展示，反之返回false
  // eslint-disable-next-line
  return (showInframeCount: number) => {
    return frameCount.value >= showInframeCount
  }
}

关于requestAnimationFrame的描述：MDN