【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>
相关推荐
Mintopia8 分钟前
轻量化AIGC模型在移动端Web应用的适配技术
前端·javascript·aigc
Mintopia8 分钟前
Next.js CI/CD 基础(GitHub Actions)
前端·javascript·next.js
小朋友,你是否有很多问号?1 小时前
Spark10- RDD转DataFrame的三种方式
大数据·javascript·spark
Wiktok1 小时前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin
devii661 小时前
html.
前端
掘金安东尼1 小时前
为什么浏览器要限制 JavaScript 定时器?
前端·javascript·github
学前端搞口饭吃2 小时前
react context如何使用
前端·javascript·react.js
GDAL2 小时前
为什么Cesium不使用vue或者react,而是 保留 Knockout
前端·vue.js·react.js
IT_陈寒2 小时前
《Java 21新特性实战:5个必学的性能优化技巧让你的应用快30%》
前端·人工智能·后端
小谭鸡米花2 小时前
uni小程序中使用Echarts图表
前端·小程序·echarts