【学习 vite + vue3 + pinia + ts】setup异步返回 async setup

正常情况下，setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到对象中的属性。

但是，借助组件异步引入与Suspense结合，可以实现setup返回一个Promise实例

父组件中：

异步引入组件：

import { defineAsyncComponent } from 'vue'

const Child = defineAsyncComponent(() => import(`./Child`))

Suspense使用：

<Suspense>

        <template v-slot:default>

                <Child />

        </template>

        <template v-slot:fallback>

                <h3>加载中，请稍等...</h3>

        </template>

</Suspense> 

子组件中： 

async setup(){

        let sum = ref(0)

        let p = new Promise((resolve,reject) => {

                setTimeout(() => {

                        resolve({ sum })

                }, 3000)

        }

        return await p

}

setup语法糖写法：

<script setup> // 结果代码会被编译成 async setup()

        const post = await axios.get(`xxx`)

</script> 

---

若有错误，欢迎评论或私信指出~

共同学习，共同进步！