【vue+ts】性能优化,defer优化白屏

代码:

javascript 复制代码
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
    }
}

用法:

html 复制代码
<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>
相关推荐
人工智能训练师3 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny073 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy4 小时前
css的基本知识
前端·css
昔人'4 小时前
css `lh`单位
前端·css
前端君5 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6146 小时前
Web前端面试题(2)
前端
知识分享小能手6 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队7 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光7 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军7 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite