Vue笔记12-新的组件-Suspense

<Suspense>是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态，需要结合异步依赖，才能看到效果。
为了演示效果，将网络调整为Fast 3G，来查看效果。
Child.vue

<template>
  <div id="Child">
    <h1>我是子组件</h1>
  </div>
</template>
<script>
export default {
  name: "Child"
}
</script>
<style scoped>
#Child {
  background-color: green;
  padding: 10px;
}
</style>

App.vue

<template>
  <div id="App">
    <h1>我是父组件</h1>
    <Suspense>
      <template v-slot:default><!--正常加载的时候，展示Child组件-->
        <Child/>
      </template>
      <template v-slot:fallback><!--网速慢，或者加载失败的时候，提示加载中……-->
        <h1>加载中……</h1>
      </template>
    </Suspense>
  </div>
</template>
<script>
// import Child from "./components/Child.vue";// 静态引入
import {defineAsyncComponent} from "vue";

const Child = defineAsyncComponent(() => import("./components/Child.vue"));// 异步引入
export default {
  name: 'App',
  components: {Child}
}
</script>
<style scoped>
#App {
  background-color: red;
  padding: 10px;
}
</style>