They allow our application to render some back-up content while waiting for asynchronous components, allowing us to create a smooth user experience

src\App.vue

<template>
    <h2>App parent components: Use of Suspense components</h2>

    <Suspense>
        <template #default>
            <! -- Asynchronous components -->
            <! -- <AsyncComponent /> -->
            <AsyncAddress />
        </template>
        <template v-slot:fallback>
            <! -- loading -->
            <h2>Loading</h2>
        </template>
    </Suspense>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue'

import AsyncComponent from './components/AsyncComponent.vue'
import AsyncAddress from './components/AsyncAddress.vue'
export default defineComponent({
    components: {
        AsyncComponent,
        AsyncAddress,
    },
    name: 'App'.setup() {
        return{}}})</script>
Copy the code

src\components\AsyncAddress.vue

<template>
    <h2>AsyncAddress components</h2>
    <h3>{{data}}</h3>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import axios from 'axios'

export default defineComponent({
    name: 'AsyncAddress'./ / method
    // setup() {
    // return axios.get('/data/address.json').then((response) => {
    // return {
    // data: response.data,
    / /}
    / /})
    // },
    / / method 2
    async setup() {
        const result = await axios.get('/data/address.json')
        return { data: result.data }
    },
})
</script>
Copy the code

src\components\AsyncComponent.vue

<template>
    <h2>AsyncComponent subset component</h2>
    <h3>{{msg}}</h3>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'AsyncComponent'.setup() {
        / / method 3
        return new Promise((resolve, reject) = > {
            setTimeout(() = > {
                resolve({
                    msg: 'do you love me',}}),2000)})}})</script>
Copy the code