deepseek的答案
分片渲染
结合requestAnimationFrame 和vue3 实现分片渲染
逐帧渲染
<template>
<div>
<div v-for="(item, index) in 50000" :key="index">
<template v-if="defer(index)">
<h4>序号: {{ index }}</h4>
<p>内容区块...</p>
</template>
</div>
</div>
</template>
<script setup>
import { onUnmounted, ref } from 'vue';
// 自定义分帧渲染 Hook
const useDeferRender = (maxFrameCount = 100) => {
const frameCount = ref(0);
let animationId = null;
const updateFrame = () => {
animationId = requestAnimationFrame(() => {
frameCount.value++;
if (frameCount.value < maxFrameCount) {
updateFrame();
}
});
};
updateFrame(); // 启动渲染循环
onUnmounted(() => {
cancelAnimationFrame(animationId); // 组件卸载时清除
});
return (n) => frameCount.value >= n; // 判断当前帧是否达到渲染条件
};
const defer = useDeferRender(50000); // 总渲染帧数设为50000（与数据量对应）
</script>
