在Vue.js`mount`中可以使用`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

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

Answer 1

它将起作用,因为mounted钩子在组件已经安装后被调用,换句话说它不会等待渲染之前解决的promises.唯一的事情是,在承诺解决之前,你将拥有一个"空"组件.

如果您需要的是在数据准备就绪之前不能呈现的组件,那么您需要在数据中使用一个标志,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;
},

Answer 2

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

在 vue3 中执行此操作的正确方法是使 setup() 函数像这样异步：

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

然后在父级中使用悬念组件添加后备，如下所示：

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

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