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