创建 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 } }
在组件中使用
1 <template> 2 <div> 3 <div v-for="(item, index) in 1000" :key="index"> 4 <customComponent v-if="defer(index)"></customComponent> 5 </div> 6 </div> 7 </template> 8 9 <script setup> 10 import { useDefer } from './useDefer' 11 12 const defer = useDefer() 13 </script>