vue组件渲染优化白屏时间

使用defer函数来优化 代码如下

import {ref} from "vue"
export function userDefer(maxFrameCount = 1000){
	const frameCount = ref(0);
	const refreshFrameCount= ()=>{
		requestAnimationFrame(()=>{
			frameCount.value++;
			if(frameCount.value < maxFrameCount){
				refreshFrameCount()
			}
		})
	};
	refreshFrameCount()
	return function(showInFrameCount){
		return frameCount.value >= showInFrameCount;
	}
	}

使用方式，将函数加到组件的v-if上

<script setup>

import {userDefer} from "../src/utils/userDefer.js"

const defer = userDefer()
</script>

<template>
  
 <div class="card">
	 <div  v-for="n in 100">
	 	  <card v-if="defer(n)"></card>
	 </div>
 </div>
</template>

<style>

</style>