Vue.js“mounted”中是否可以使用“async/await”？

我想做这样的事情mounted() {}:

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

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

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

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

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

我找不到更多信息，但实际上可以吗？

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

如果您需要的是在数据准备好之前不呈现组件，则您的数据中需要一个与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;
},