Vue 生命周期钩子竞争条件

Vue lifecycle hook race condition

我有一个关于 Vue 生命周期挂钩的问题。我有一些方法想在挂钩中先调用,但之前调用了另一个方法。

所需的方法是从 beforeMount 调用的 loadData()。此方法负责 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()调用loadData(),但每次都是第二个。有人知道答案吗?谢谢

处理此问题的一种简单方法是使用 v-if 延迟 <app-select> 的渲染,直到数据准备就绪:

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

其中 loadedDatathis.loadedData 或挂钩完成加载时将填充的任何数据 属性。在数据准备好之前,<app-select> 不会开始呈现。这在本质上类似于手表的概念,只是在模板中。