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

本文主要是介绍【vue+ts】性能优化，defer优化白屏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

代码：

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>

这篇关于【vue+ts】性能优化，defer优化白屏的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---