前端-Suspense的使用

Suspense的使用

Suspense 是一个特殊的组件，它在满足条件之前呈现指定内容而不是组件。这种情况通常是在您的组件功能中发生的异步操作，比如在用户等待时显示的一些特定的内容。在vue3中，终于也加入了类似的功能。

通常，在组件上渲染加载动画可以使用简单的 v-if 和 v-else 来实现，示例如下：

<div v-if="loading">
    # loading animation
</div>
<div v-else>
    ...
</div>

使用 <suspense>

<template>
  <div>
    <Suspense>
      <AsyncCity/> //这个组件执行了异步操作
      <template #fallback>
        <p class="text-white text-center">Loading...</p>
      </template>
    </Suspense>
  </div>
</template>