Vue生命周期钩子竞争条件

Question

我有一个关于Vue生命周期挂钩的问题。我有一些方法想先在钩子中调用，但另一种方法是前面调用的。

所需的方法是loadData()，它从beforeMount调用。此方法负责API请求。但是，它在方法getIndex之后调用。

首先调用的方法是getIndex，我希望它调用最后一个：

myFile.vue

<b-form>                
   <app-select
      labelName="Name"
      fieldType="Type"
      :val="getIndex('M','Q',null,null)">
   </app-select>
</b-form>

我试着从mounted()，beforeMounted()打电话给beforeMounted()，但是每次都是第二次。有人知道答案吗？谢谢

Answer 1

处理这一问题的一个简单方法是使用v-if延迟<app-select>的呈现，直到数据准备就绪：

<app-select v-if="loadedData" ...

当钩子完成加载时，loadedData为this.loadedData或其他数据属性将被填充。直到数据准备就绪，<app-select>才会开始呈现。这在本质上类似于手表的概念，但在模板中。