怎麼操作Vue載入順序

php中世界最好的语言原創: 2018-04-17 09:45:432758瀏覽

這次帶給大家怎麼操作Vue載入順序，操作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)

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！