Vue 生命周期钩子竞争条件

Question

我有一个关于 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()，但每次都是第二个。有人知道答案吗？谢谢

Answer 1

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

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

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

Vue 生命周期钩子竞争条件

Vue lifecycle hook race condition

javascript

vue.js

vue-component

vuejs2

lifecycle-hook