Vue3异步数据加载组件suspense的使用方法

<template>
    <div v-for="(people, index) in peoples.results" :key="index">
        {{ people.name }} {{ people.birth_year }}
    </div>
</template>
<script>
import { ref } from "vue";
export default {
    name: "CyPeoples",
    async setup() {
        const peoples = ref(null);
        const headers = { "Content-Type": "application/json" };
        const fetchPeoples = await fetch("https://swapi.dev/api/people", {
            headers,
        });
        peoples.value = await fetchPeoples.json();
        return { peoples };
    },
};
</script>

<template>
    <div>
        <h1>星球大战人物</h1>
    </div>
    <suspense>
        <template #default>
            <CyPeoples />
        </template>
        <template #fallback>
            <div>
                <h3>数据加载中……</h3>
            </div>
        </template>
    </suspense>
</template>
<script>
import CyPeoples from "./components/Peoples.vue";
import { suspense } from "vue";
export default {
    name: "App",
    components: {
        CyPeoples,
        suspense,
    },
};
</script>