Vue.js \`mounted\` 中是否可以使用\`async/await\`？

Question

我想在 mounted() {} 中做这样的事情：

 await fetchData1();
await fetchData2UsingData1();
doSomethingUsingData1And2();

所以我想知道这是否有效：

 async mounted() {
    await fetchData1();
    await fetchData2UsingData1();
    doSomethingUsingData1And2();
},

在我的环境中，它不会引发任何错误，并且似乎运行良好。但是在这个问题中，生命周期钩子中的 async/await 没有实现。

https://github.com/vuejs/vue/issues/7209

我找不到更多信息，但实际上是否可用？

原文由 Taichi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

它将起作用，因为 mounted 钩子在组件已经安装 后被 调用，换句话说，它不会在渲染之前等待承诺解决。唯一的问题是，在承诺解决之前，您将拥有一个“空”组件。

如果您需要的是在数据准备好之前不渲染组件，那么您需要在数据中添加一个与 v-if 一起工作的标志，以便在一切准备就绪时渲染组件：

 // in your template
<div v-if="dataReady">
    // your html code
</div>

// inside your script
data () {
    return {
        dataReady: false,
        // other data
    }
},

async mounted() {
    await fetchData1();
    await fetchData2UsingData1();
    doSomethingUsingData1And2();
    this.dataReady = true;
},

原文由 Eder Díaz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

编辑： 如文档中所述，这是一项 实验性 功能，目前不应在生产应用程序中使用。

在 vue3 中执行此操作的正确方法是使您的 setup() 函数异步，如下所示：

 <script>
// MyComponent.vue
export default defineComponent({
/* ... */
    async setup() {
        await fetchData1();
        await fetchData2UsingData1();
        doSomethingUsingData1And2();
        this.dataReady = true;
    }
}
</script>

然后在父组件中使用一个 suspense 组件 来添加一个回退，如下所示：

 <template>
    <Suspense>
        <template #default>
            <MyComponent />
        </template>
        <template #fallback>
            Loading...
        </template>
    </Suspense>
</template>

因此，您会在组件加载时看到#fallback 模板，然后在组件准备好时看到组件本身。

原文由 Herobrine 发布，翻译遵循 CC BY-SA 4.0 许可协议