vue.js - 为什么我在 Vue.js 3 中使用 async setup() 时得到空白(空)内容？

Question

问题
我在 Vue.js 3 中使用 async setup()，但我的 HTML 内容消失了。我的组件模板没有插入到 HTML，但是当我删除 async 和 await 前缀时，我的 HTML 内容又回来了。我怎样才能解决这个问题？

async setup () {
    const data = ref(null)
    try {
        const res = await fetch('api')
        data.value = res.json()
    }
    catch (e) {
        console.error(e)
    }
    return {
        data
    }
}

我试过

我检查了 fetch，它返回了正确的响应

我试过 <Suspense>标签，但还是同样的问题

Answer 1

您的组件的 async setup()除了丢失的之外看起来还不错await res.json() ，这仍然不会导致您看到的问题。我怀疑你使用了 <Suspense>是不正确的。
使用 async setup()在组件中，父组件必须在 <Suspense> 中使用该组件标签:

<!-- Parent.vue -->
<template>
 <Suspense>
   <MyAsyncComponent />
 </Suspense>
</template>

您也可以使用 default和 fallback <Suspense> 的插槽在等待子组件的设置解决时显示加载指示器:

<!-- Parent.vue -->
<template>
 <Suspense>
   <template #default>
     <MyAsyncComponent />
   </template>
   <template #fallback>
     <span>Loading...</span>
   </template>
 </Suspense>
</template>

已通过 vue@3.0.0-0 验证, Node.js 14, Chrome 84, macOS v10.15 (卡特琳娜)。请注意 <Suspense>仍处于试验阶段，API 可能会发生变化。
Demo