快捷導(dǎo)航

淺談Vue的加載順序探討

更新時(shí)間：2017年10月25日 10:42:07 作者：蟻方陣

本篇文章主要介紹了Vue的加載順序探討，詳細(xì)的介紹了加載順序以及如何判斷所有的子組件加載完成。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在Vuejs 1.0版本中，如果父子組件進(jìn)行配合，它們的生命周期執(zhí)行具有如下特點(diǎn)：

1. created總是先父后子

生命周期函數(shù)created總是按照從父到子的順序依次執(zhí)行，但是兄弟之間沒(méi)有嚴(yán)格按照這樣的順序執(zhí)行，估計(jì)是采用了異步函數(shù)，不僅如此，子組件在父組件中的插入順序也是隨機(jī)的，并沒(méi)有什么特別的規(guī)律。假定子組件的引用順序如下：

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

如果采用$children引用來(lái)獲取所有的子組件，那么”child-c1”并不總是處于第一個(gè)位置，如下：

 // 大多數(shù)時(shí)候判斷會(huì)失敗
 if(this.$children[0] === this.$refs.child1) {
  // 這里的代碼很可能得不到執(zhí)行機(jī)會(huì)
 }

2. ready的順序更混亂

按照我的估計(jì)，父子組件的ready順序應(yīng)該是先子后父，這樣才能保證組件完全加載完成，但從實(shí)踐的實(shí)例來(lái)看，ready完全沒(méi)有順序，有時(shí)候是父組件先加載完成，也有時(shí)候是子組件先加載完成，所以在編程實(shí)踐中，絕對(duì)不可以依賴(lài)他們的加載順序。

3. 結(jié)論

在實(shí)踐中，如果需要保障組件依次加載完成，絕對(duì)不可以依賴(lài)組件的生命順序，也不能依賴(lài)父子組件的ready生命周期。

如何判斷所有的子組件加載完成

在父子組件的配合使用中，尤其是配置信息與業(yè)務(wù)信息相分離的情況下，我們經(jīng)常需要在所有的子組件加載完成后，再執(zhí)行父組件的相關(guān)服務(wù)，以如下的組件結(jié)構(gòu)為例：

 <jq-grid :url="url" col-size="5" :sub-grid="true" ref="accountGrid" :on-ready="initGrid" :query="queryParams">
 <jq-col label="賬號(hào)" name="username" width="75" :sortable="true"></jq-col>
 <jq-col label="用戶(hù)名稱(chēng)" name="remarkName" width="75" :sortable="true"></jq-col>
 <jq-col label="創(chuàng)建時(shí)間" name="createTime" width="90">
 </jq-col>
</jq-grid>

在上面的例子中，我們需要組合子組件的配置信息，因此，只有所有的子組件加載完成，組合的配置信息才能準(zhǔn)確完整。

所以，如果直接用mounted事件（1.0中為ready事件），則一定得到不正確的結(jié)果，為了解決此問(wèn)題，我們不妨生命如下的數(shù)據(jù)結(jié)構(gòu)與方法：

props : {
 colSize : {
  type : Number,
  default : 1
 }
}

data () {
 return {
  // 用于獲取所有的子組件配置信息
  colModel : [],
  readySize : 0
 }
},

methods : {
 /**
  * 由子組件在加載完成時(shí)調(diào)用
  */
 addColModel () {
   this.readySize ++
   // 檢查進(jìn)度是否設(shè)置的colSize一致
   if(this.readySize == this.colSize) {
   // 這時(shí)候所有的子組件已加載完成
   } 
 }
}

通過(guò)設(shè)置配置項(xiàng)“colSize”與檢查子組件調(diào)用的方法“addColModel”，我們可確定所有子組件加載完成的時(shí)刻（此時(shí)父組件有可能加載完成，也可能未加載完成），從而進(jìn)行必要的配置信息整理操作。

但是在實(shí)際應(yīng)用中，我們發(fā)現(xiàn)，如果子組件的數(shù)量較多時(shí)，會(huì)發(fā)生另外一種現(xiàn)象，子組件加載順序會(huì)隨機(jī)發(fā)生，如果要保證加載順序與配置順序一致，我們可以在子組件中加入“order”屬性，如下，最新配置內(nèi)容如下：

<jq-grid :url="url" col-size="8" :sub-grid="true" ref="hostGrid" :on-ready="initGrid" :query="queryParams">
 <jq-col order="1" label="名稱(chēng)" name="hostName" width="75" :sortable="true" ></jq-col>
 <jq-col order="2" label="主機(jī)型號(hào)" name="model" width="60" :sortable="true"></jq-col>
 <jq-col order="3" label="生產(chǎn)廠(chǎng)商" name="vendor" width="60" :sortable="true"></jq-col>
</jqgrid>

經(jīng)過(guò)這樣的處理，我們可以在所有子組件加載完成對(duì)其進(jìn)行排序，如下：

// 由于Vue無(wú)法確定子元素的加載順序，必須手動(dòng)指定order
this.colModel.sort((a, b) => a.order - b.order)

結(jié)論

通過(guò)手動(dòng)添加輔助變量與方法，可以獲取子組件加載完成的時(shí)刻，從而執(zhí)行整合性操作。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

淺談Vue的加載順序探討

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具