Vue.js已挂载`async / await`吗?

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

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

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

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

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

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

我找不到更多信息,但实际上可用吗?

樱飞云泡芙2020/03/12 17:39:03

只需使用$ nextTick调用异步函数即可。

Davaid番长2020/03/12 17:39:03

之所以可以使用它,是因为在挂载组件之后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;
},