vue性能优化

异步组件

<template>
  <Suspense v-if="!routerLoading">
    <template #default>
      <AsyncComp />
    </template>
    <template #fallback>
      <div class="loading-container">
        <div class="loading-content">
          <div class="loading-text">加载中...</div>
          <div class="loading-spinner"></div>
        </div>
      </div>
    </template>
  </Suspense>
</template>

<script>
const AsyncComp = defineAsyncComponent(() => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        render() {
          return "hello world";
        }
      })
    },2000);
  });
})
</script>
posted @ 2025-01-17 10:23  fight139  阅读(16)  评论(0)    收藏  举报