当前位置：首页 > article >正文

Suspense 使用方法

article 2025/3/4 4:15:47

在这个组件树中有多个嵌套组件，要渲染出它们，首先得解析一些异步资源。如果没有 <Suspense>，则它们每个都需要处理自己的加载、报错和完成状态。在最坏的情况下，我们可能会在页面上看到三个旋转的加载态，在不同的时间显示出内容。

有了 <Suspense> 组件后，我们就可以在等待整个多层级组件树中的各个异步依赖获取结果时，在顶层展示出加载中或加载失败的状态。

import Loading from '../components/Loading.vue'
const CompA = defineAsyncComponent({
  loader: () => new Promise((resolve, reject) => {
    setTimeout(()=> {return resolve(import('../components/CompA.vue'))}, 1000)
  }),
  loadingComponent: Loading,
  delay: 200,
  timeout: 3000
})
const CompB = defineAsyncComponent({
  loader: () => new Promise((resolve, reject) => {
    setTimeout(()=> {return resolve(import('../components/CompB.vue'))}, 3000)
  }),
  loadingComponent: Loading,
  delay: 200,
  timeout: 3000
})
  
  <Suspense>
    <div>
      <CompA />
      <CompB />
    </div>
    <template #fallback>
      <Loading />
    </template>
  </Suspense>

查看全文

http://www.kler.cn/a/567900.html