Vue3异步组件和Suspense

注意:目前(2022-08-01)Suspense显示的是一个实验性的特性，API随时可能会修改

Suspense是一个内置的全局组件，该组件有两个插:

• default:如果default可以显示，那么显示default的内容;
• fallback:如果default无法显示，那么会显示falback插槽的内容:

代码示例

// asyncHome.vue
<template>
  <div class="home">
    <h2>home</h2>
  </div>
</template>

<script setup>

</script>

<style lang="less" scoped>

</style>

fallback是应急的意思，所以在没有加载完成的时候会显示这个页面

// App.vue
<template>
  <div class="app">
    <suspense>
      <template #default>
        <async-home></async-home>
      </template>
      <template #fallback>
        <h2>Loading</h2>
      </template>
    </suspense>  
  </div>
</template>  
<script setup>
import { defineAsyncComponent } from 'vue';

const AsyncHome = defineAsyncComponent(() => import("./AsyncHome.vue"))

</script>

<style scoped>

</style>

感谢大家观看，我们下次见