首頁 > 文章 > web前端 > Vue的載入順序實例探討

Vue的載入順序實例探討

小云云原創: 2018-01-22 09:53:081608瀏覽

本文主要介紹了Vue的載入順序探討，詳細的介紹了載入順序以及如何判斷所有的子元件載入完成。小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

在Vuejs 1.0版本中，如果父子元件進行配合，它們的生命週期執行具有以下特點：

1. created總是先父後子

#生命週期函數created總是按照從父到子的順序依次執行，但是兄弟之間沒有嚴格按照這樣的順序執行，估計是採用了異步函數，不僅如此，子組件在父組件中的插入順序也是隨機的，並沒有什麼特別的規律。假定子元件的引用順序如下：

<p class="container">
 <child-c1 v-ref:child1></child-c1>
 <child-c2 v-ref:child2></child-c2>
</p>

如果採用$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无法确定子元素的加载顺序，必须手动指定order
this.colModel.sort((a, b) => a.order - b.order)

結論

透過手動加入輔助變數與方法，可以取得子元件載入完成的時刻，從而執行整合性操作。

Vue的載入順序實例探討

相關文章