代码：

import {ref} from 'vue'

export function useDefer(maxCount = 100) {
    const count = ref(0)
    let raqId:any = null;
    function updateFrame() {
        count.value++
        if (count.value >= maxCount) {
            return;
        }
        raqId = requestAnimationFrame(updateFrame)
    }
    updateFrame();
    onUnmounted(() => {
        cancelAnimationFrame(raqId)
    })
    return function (n:number) {
        return count.value >= n
    }
}

用法：

<template>
    <IndexBbsRotationcArea :homeData="homeData" v-if="defer(1)" />
    <IndexBbsRecommendArea v-if="defer(2)" />
    <IndexBbsRecommendArea v-if="defer(3)" />
    <IndexBbsRecommendArea v-if="defer(4)" />
    <IndexBbsRecommendArea v-if="defer(5)" />
</template>

<script setup lang="ts">
    import { useDefer } from "~/utils/defer";
    const defer = useDefer();
</script>