在Vuejs 1.0版本中，如果父子組件進行配合，它們的生命周期執行具有如下特點：
1. created總是先父后子
生命周期函數created總是按照從父到子的順序依次執行，但是兄弟之間沒有嚴格按照這樣的順序執行，估計是采用了異步函數，不僅如此，子組件在父組件中的插入順序也是隨機的，并沒有什么特別的規律。假定子組件的引用順序如下：
<div class="container"> <child-c1 v-ref:child1></child-c1> <child-c2 v-ref:child2></child-c2></div>
如果采用$children引用來獲取所有的子組件，那么”child-c1”并不總是處于第一個位置，如下：
// 大多數時候判斷會失敗 if(this.$children[0] === this.$refs.child1) { // 這里的代碼很可能得不到執行機會 }2. ready的順序更混亂
按照我的估計，父子組件的ready順序應該是先子后父，這樣才能保證組件完全加載完成，但從實踐的實例來看，ready完全沒有順序，有時候是父組件先加載完成，也有時候是子組件先加載完成，所以在編程實踐中，絕對不可以依賴他們的加載順序。
3. 結論
在實踐中，如果需要保障組件依次加載完成，絕對不可以依賴組件的生命順序，也不能依賴父子組件的ready生命周期。
如何判斷所有的子組件加載完成
在父子組件的配合使用中，尤其是配置信息與業務信息相分離的情況下，我們經常需要在所有的子組件加載完成后，再執行父組件的相關服務，以如下的組件結構為例：
<jq-grid :url="url" col-size="5" :sub-grid="true" ref="accountGrid" :on-ready="initGrid" :query="queryParams"> <jq-col label="賬號" name="username" width="75" :sortable="true"></jq-col> <jq-col label="用戶名稱" name="remarkName" width="75" :sortable="true"></jq-col> <jq-col label="創建時間" name="createTime" width="90"> </jq-col></jq-grid>
在上面的例子中，我們需要組合子組件的配置信息，因此，只有所有的子組件加載完成，組合的配置信息才能準確完整。
所以，如果直接用mounted事件（1.0中為ready事件），則一定得到不正確的結果，為了解決此問題，我們不妨生命如下的數據結構與方法：
props : { colSize : { type : Number, default : 1 }}data () { return { // 用于獲取所有的子組件配置信息 colModel : [], readySize : 0 }},methods : { /** * 由子組件在加載完成時調用 */ addColModel () { this.readySize ++ // 檢查進度是否設置的colSize一致 if(this.readySize == this.colSize) { // 這時候所有的子組件已加載完成 } }}通過設置配置項“colSize”與檢查子組件調用的方法“addColModel”，我們可確定所有子組件加載完成的時刻（此時父組件有可能加載完成，也可能未加載完成），從而進行必要的配置信息整理操作。
但是在實際應用中，我們發現，如果子組件的數量較多時，會發生另外一種現象，子組件加載順序會隨機發生，如果要保證加載順序與配置順序一致，我們可以在子組件中加入“order”屬性，如下，最新配置內容如下：
<jq-grid :url="url" col-size="8" :sub-grid="true" ref="hostGrid" :on-ready="initGrid" :query="queryParams"> <jq-col order="1" label="名稱" name="hostName" width="75" :sortable="true" ></jq-col> <jq-col order="2" label="主機型號" name="model" width="60" :sortable="true"></jq-col> <jq-col order="3" label="生產廠商" name="vendor" width="60" :sortable="true"></jq-col></jqgrid>
經過這樣的處理，我們可以在所有子組件加載完成對其進行排序，如下：
// 由于Vue無法確定子元素的加載順序，必須手動指定orderthis.colModel.sort((a, b) => a.order - b.order)
結論
通過手動添加輔助變量與方法，可以獲取子組件加載完成的時刻，從而執行整合性操作。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
