Vue3之Suspense

簡介

目前這是一個實驗性的元件，官方并不推薦在正式環境中使用 點選

• 寫到這裡，感覺vue和react越來越像了，點選
• 他用于加載異步元件的時候，當異步元件還未加載出來的時候優先顯示一些内容，如骨架屏等
• 隻是我們在使用的時候需要使用vue的插槽文法 點選

例子

異步元件

<script setup>
const asyncFunc = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("hello world")
        }, 2000)
    })
}

const param = await asyncFunc()
</script>

<template>
    <h2>{{ param }}</h2>
</template>
           

使用Suspense

<script setup>
import { defineAsyncComponent } from "vue"
// 引入異步元件
const AsyncComponent = defineAsyncComponent(() => import("./AsyncComponent.vue"))
</script>

<template>
    <h2>Suspense</h2>
    <Suspense>
        <template v-slot:default>
            <!-- 放異步元件 -->
            <AsyncComponent />
        </template>
        <template v-slot:fallback>
            <!-- 當異步元件還沒有加載出來需要顯示的内容 -->
            <div>Loading...</div>
        </template>
    </Suspense>
</template>
           

當我們重新整理加載異步元件的時候就會發現，在沒有加載出異步元件的時候，會先顯示

loading

，這樣會有一個比較好的使用者體驗