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)
結論
透過手動加入輔助變數與方法,可以取得子元件載入完成的時刻,從而執行整合性操作。
相關推薦:
以上是Vue的載入順序實例探討的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

Python中的支援向量機(SupportVectorMachine,SVM)是一個強大的監督學習演算法,可以用來解決分類和回歸問題。 SVM在處理高維度資料和非線性問題的時候表現出色,被廣泛地應用於資料探勘、影像分類、文字分類、生物資訊學等領域。在本文中,我們將介紹在Python中使用SVM進行分類的實例。我們將使用scikit-learn函式庫中的SVM模

隨著新一代前端框架的不斷湧現,VUE3作為一個快速、靈活、易上手的前端框架備受熱愛。接下來,我們就來一起學習VUE3的基礎知識,製作一個簡單的影片播放器。一、安裝VUE3首先,我們需要在本地安裝VUE3。開啟命令列工具,執行以下命令:npminstallvue@next接著,新建一個HTML文件,引入VUE3:<!doctypehtml>

Golang是一門功能強大且高效的程式語言,可用於開發各種應用程式和服務。在Golang中,指標是一種非常重要的概念,它可以幫助我們更靈活和有效率地操作資料。指標轉換是指在不同類型之間進行指標操作的過程,本文將透過具體的實例來學習Golang中指標轉換的最佳實踐。 1.基本概念在Golang中,每個變數都有一個位址,位址就是變數在記憶體中的位置。

隨著網路的快速發展,數據已成為了當今資訊時代最為重要的資源之一。而網路爬蟲作為一種自動化獲取和處理網路數據的技術,也越來越受到人們的關注和應用。本文將介紹如何使用PHP開發簡單的網路爬蟲,並實現自動化取得網路資料的功能。一、網路爬蟲概述網路爬蟲是一種自動化取得和處理網路資源的技術,其主要工作流程是模擬瀏覽器行為,自動存取指定的URL位址並提取所

Django框架是一種用於Web應用程式的Python框架,它提供了一個簡單而強大的方式來創建Web應用程式。事實上,Django已成為目前最受歡迎的PythonWeb開發框架之一,也成為許多公司的首選,包括Instagram和Pinterest。本文將深入探討Django框架是什麼,包括基礎概念和重要元件,以及具體程式碼範例。 Django基礎概念Djan

隨著網路的普及,驗證碼已經成為了登入、註冊、找回密碼等操作的必要流程。在Gin框架中,實作驗證碼功能也變得異常簡單。本文將介紹如何在Gin框架中使用第三方函式庫實作驗證碼功能,並提供範例程式碼供讀者參考。一、安裝依賴函式庫在使用驗證碼之前,我們需要安裝一個第三方函式庫goCaptcha。安裝goCaptcha可以使用goget指令:$goget-ugithub

Oracle實例數量與資料庫效能關係Oracle資料庫是業界知名的關係型資料庫管理系統之一,廣泛應用於企業級的資料儲存與管理。在Oracle資料庫中,實例是一個非常重要的概念。實例是指Oracle資料庫在記憶體中的運作環境,每個實例都有獨立的記憶體結構和後台進程,用於處理使用者的請求和管理資料庫的操作。實例數量對於Oracle資料庫的效能和穩定性有著重要的影響。

Linux作業系統作為一種常用的開源作業系統,具有強大的可自訂性和靈活性。在使用Linux系統時,我們經常會遇到各種特殊字元的處理。這些特殊字元在命令列中具有特殊的意義,能夠實現許多高階功能。本文將深入探討Linux中常見的特殊字符,並結合具體的程式碼範例來詳細介紹它們的用法。通配符:通配符是用來匹配檔案名稱的特殊字符,常見的通配符包括*、?、[]等。下面是幾種
