vue.js - `async/await` 在 Vue.js `mounted` 中可用吗？

Question

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

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

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

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

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

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

我找不到更多的信息，但实际上有吗？

Answer 1

它会起作用，因为 mounted Hook 在组件已安装后 被调用，换句话说，它不会等待 promise 解决后再呈现。唯一的问题是，在 promise 解决之前，您将拥有一个“空”组件。

如果您需要在数据准备好之前不渲染组件，则您需要在数据中添加一个标志，该标志与 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;
},