首頁 web前端 js教程 Vue的載入順序實例探討

Vue的載入順序實例探討

Jan 22, 2018 am 09:53 AM
實例 探討 順序

本文主要介紹了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)
登入後複製

結論

透過手動加入輔助變數與方法,可以取得子元件載入完成的時刻,從而執行整合性操作。

相關推薦:

高效能javascript之載入順序與執行原理詳解

淺析CSS 的載入及載入順序

html、css以及js檔案載入順序及執行情況

#

以上是Vue的載入順序實例探討的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

熱門話題

Java教學
1664
14
CakePHP 教程
1421
52
Laravel 教程
1315
25
PHP教程
1266
29
C# 教程
1239
24
Python中的SVM實例 Python中的SVM實例 Jun 11, 2023 pm 08:42 PM

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

VUE3入門實例:製作一個簡單的影片播放器 VUE3入門實例:製作一個簡單的影片播放器 Jun 15, 2023 pm 09:42 PM

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

學習Golang指標轉換的最佳實務範例 學習Golang指標轉換的最佳實務範例 Feb 24, 2024 pm 03:51 PM

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

PHP 簡單網頁爬蟲開發實例 PHP 簡單網頁爬蟲開發實例 Jun 13, 2023 pm 06:54 PM

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

深入探討:Django框架是什麼? 深入探討:Django框架是什麼? Jan 19, 2024 am 09:23 AM

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

Gin框架中的驗證碼使用實例 Gin框架中的驗證碼使用實例 Jun 23, 2023 am 08:10 AM

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

Oracle實例數量與資料庫效能關係 Oracle實例數量與資料庫效能關係 Mar 08, 2024 am 09:27 AM

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

深入探討Linux中常見的特殊字符 深入探討Linux中常見的特殊字符 Mar 14, 2024 pm 02:54 PM

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

See all articles