Доступен ли `async / await` в Vue.js` mount`?

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 вызывается после , когда компонент уже был смонтирован, иными словами, он не будет ждать выполнения обещаний перед рендерингом.Единственное, что у вас будет «пустой» компонент, пока не будут решены обещания.

Если вам нужно, чтобы компонент не отображался до тех пор, пока данные не будут готовы, вам понадобится флаг в ваших данных, которыйработает вместе с 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;
},