首頁  >  文章  >  web前端  >  怎麼操作Vue載入順序

怎麼操作Vue載入順序

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

這次帶給大家怎麼操作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中文網其它相關文章!

推薦閱讀:

JS取得目前地理位置案例詳解

#parabola.js實作拋物線與加入購物車功能

以上是怎麼操作Vue載入順序的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn