defer.ts
javascript
import { ref } from 'vue'
export function useDefer() {
const frameCount = ref(1)
function updateFrameCount() {
requestAnimationFrame(() => {
frameCount.value++
updateFrameCount()
})
}
updateFrameCount()
return function (n: any) {
return frameCount.value >= n
}
}
在.vue文件中使用,按帧数加载组件
javascript
<template>
<div>
<Header v-if="defer(1)"></Header>
<Main v-if="defer(2)"></Main>
<Footer v-if="defer(3)"></Footer>
</div>
</template>
<script>
import { useDefer } from '@/utils/defer'
const defer = useDefer()
</script>