526互联

Vue3内置组件suspense用法

发布时间 2023-08-25 11:45:44作者: 菜鸟小何

1、作用

在使用异步组件时，由于需要等待组件加载完成后才能显示，因此可能会出现页面空白或显示错误信息的情况。而 Suspense组件的作用就是在异步组件加载完成前显示一个占位符，提高用户体验。

2、用法

  • 首先子组件AsyncShow：使用了promise包裹代码
<template>
  <div>
    <h1>{{ result }}</h1>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
 
export default defineComponent({
  setup() {
   return new Promise((resolve) => {
    setTimeout(() => {
      return resolve({
        result: 2
      })
    }, 3000)
   })
  },
})
</script>
  • 子组件DogShow代码：使用了async await
<template>
  <div>
    <img :src="rowData && rowData?.data.message" alt="">
  </div>
</template>
<script lang="ts">
import axios from 'axios'
import { defineComponent } from 'vue'
 
export default defineComponent({
  async setup() {
 
    const rowData = await axios.get('https://dog.ceo/api/breeds/image/random')
    return {
      rowData
    }
  },
})
</script>

以上promise 和 async都可以达到效果
父组件引入，suspense包裹这两个组件，然后用fallback插槽渲染子组件未加载完毕时候的内容

<template>
    <Suspense>
        <div>
          <AsyncShow></AsyncShow>
          <DogShow></DogShow>
        </div>
         <!-- 在 #fallback 插槽中显示 “Loading...” -->
        <template #fallback>
          Loading...
        </template>
  </Suspense>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import AsyncShow from './components/AsyncShow.vue';
import DogShow from './components/DogShow.vue';
export default defineComponent({
  setup() {
    return {}
  },
})
</script>

效果：
image