vue3中逐帧延迟渲染 解决白屏过长问题

自定义钩子函数 (useDefer.js)

export function useDefer() {
	//定义响应式变量
	const frameCount = ref(0);
	//定义requestAnimationFrame 的 ID，用于取消动画帧。
	let rafId;
	//更新帧计数 updateFrameCount 函数使用 requestAnimationFrame 每帧递增 frameCount.value。
	function updateFrameCount(maxCount = 100) {
		rafId = requestAnimationFrame(() => {
			frameCount.value++;
			// 当 frameCount.value 达到 maxCount 时停止递增。
			if (frameCount.value >= maxCount) return;
			updateFrameCount();
		});
	}
	// 初始化时立即调用 updateFrameCount，启动帧计数。
	updateFrameCount();
	// 使用 onUnmounted 钩子在组件卸载时取消动画帧，以防止内存泄漏。
	onUnmounted(() => {
		cancelAnimationFrame(rafId);
	});
	// 返回 defer 函数
	return function defer(n) {
		return frameCount.value >= n;
	};
}

模板中使用

<template>
	<div v-for="n in 100">
		<com v-if="defer(n)"></com>
	</div>
</template>
<script>
  import {useDefer} from 'useDefe.js' 
  const defer = useDefer()
</script>;