【Vue3】异步组件 Suspense

等待异步组件时渲染一些额外内容，让应用有更好的用户体验 。

• 使用步骤：
  • defineAsyncComponent 异步引入组件
  • 必须使用Suspense包裹组件，并配置好default 与 fallback

异步组件打包的时候会分包，能改善性能，减少首屏加载数据。

所以一个常用的使用场景就是骨架屏加异步组件。

App.vue

<template>
  <div class="app">
    <h2>我是App组件</h2>
    <Suspense>
      <template v-slot:default>
        <Child/>
      </template>
       <template v-slot:fallback>
       <h2>加载中......</h2>
       </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts">
import {defineAsyncComponent, Suspense} from 'vue'
const Child = defineAsyncComponent( ()=> import('./pages/ChildPage.vue'))
</script>

<style>
.app {
  background-color: #ddd;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 10px;
}
</style>

Child.vue

<template>
  <div class="child">
    <h2>我是Child组件</h2>
    <h3>当前求和为：{{ sum }}</h3>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
// @ts-ignore
import axios from "axios";

let sum = ref(0)
// 顶层 await 之后的代码都会变成异步的
// @ts-ignore
let {data:{content}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
console.log(content)

</script>

<style scoped>
.child {
  background-color: skyblue;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 10px;
}
</style>

使用异步组件还有优点就是代码分包。如果直接打包，打包到一个很大的js文件，会影响首屏加载的时间。

这时我们可以使用异步组件，使某些组件用的时候才去加载，打包时会自动进行代码分包。这样也不会和其他文件打包到一起，优化了性能。