Question

我想在SELECT * FROM db.Ability WHERE Name LIKE '%' + @searchText + '%' OR Effect = '%' + @searchText + '%'中做这样的事情：

mounted() {}

所以我想知道这是否可行：

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

在我的环境中，它不会引起任何错误，并且似乎运行良好。但是在此问题中，未实现生命周期挂钩中的async mounted() { await fetchData1(); await fetchData2UsingData1(); doSomethingUsingData1And2(); },。

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;
},

Answer 2

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

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

2 个答案: