使用defer优化白屏时间 长列表渲染

创建 useDefer.js文件

import { ref , onUnmounted } from 'vue'

export function useDefer(maxCount=100){
  const frameCount = ref(0)
  let rafId;
  function updateFrameCount(){
   rafId = requestAnimationFrame(()=>{
     frameCount.value++;
     if(frameCount.value>=maxCount){
        return;
     }
     updateFrameCount()
  })  
 } 
 updateFrameCount()
 onUnmounted(()=>{
   cancelAnimationFrame(rafId);
 })
 return function defer(n){
   return frameCount.value>=n
 }   
}

在组件中使用

<template>
    <div>
        <div v-for="(item, index) in 1000" :key="index">
            <customComponent v-if="defer(index)"></customComponent>
        </div>
    </div>
</template>

<script setup>
import { useDefer } from './useDefer'

const defer = useDefer()
</script>