這次帶給大家怎麼操作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中文網其它相關文章!
推薦閱讀:
以上是怎麼操作Vue載入順序的詳細內容。更多資訊請關注PHP中文網其他相關文章!