Diskussion über Beispiele für die Ladereihenfolge von Vue

Dieser Artikel führt hauptsächlich in die Diskussion der Ladereihenfolge von Vue ein, stellt die Ladereihenfolge im Detail vor und zeigt, wie beurteilt werden kann, ob alle Unterkomponenten geladen sind. Der Herausgeber findet es ziemlich gut, daher möchte ich es jetzt mit Ihnen teilen und als Referenz dienen. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Wenn in Vuejs Version 1.0 übergeordnete und untergeordnete Komponenten zusammenarbeiten, weist ihre Lebenszyklusausführung die folgenden Merkmale auf:

1. Erstellt wird immer zuerst erstellt, dann übergeordnete

Die erstellte Lebenszyklusfunktion wird immer in der Reihenfolge vom Elternteil zum Kind ausgeführt, aber die Brüder halten sich nicht strikt an diese Reihenfolge. Es wird geschätzt, dass eine asynchrone Funktion verwendet wird. Darüber hinaus wird die Einfügereihenfolge der untergeordneten Komponenten verwendet Die übergeordnete Komponente ist ebenfalls zufällig. Ja, es gibt keine spezielle Regel. Gehen Sie davon aus, dass die Referenzreihenfolge der untergeordneten Komponenten wie folgt lautet:

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

Wenn die Referenz $children verwendet wird, um alle untergeordneten Komponenten abzurufen, steht „child-c1“ nicht immer an der ersten Position, wie folgt:

 // 大多数时候判断会失败
 if(this.$children[0] === this.$refs.child1) {
  // 这里的代码很可能得不到执行机会
 }

2. Die Reihenfolge der Bereitschaft ist verwirrender

Nach meiner Einschätzung sollte die Reihenfolge der Bereitschaft der Eltern- und Kinderkomponenten zuerst Sohn und dann Eltern sein, um sicherzustellen dass die Komponente vollständig geladen ist, aber aus praktischen Beispielen geht hervor, dass „ready“ überhaupt keine Reihenfolge hat. Manchmal wird die übergeordnete Komponente zuerst geladen, und manchmal wird die untergeordnete Komponente zuerst geladen, sodass Sie sich in der Programmierpraxis nicht auf deren Ladereihenfolge verlassen dürfen .

3. Fazit

Wenn Sie in der Praxis sicherstellen müssen, dass Komponenten nacheinander geladen werden, dürfen Sie sich weder auf die Lebensreihenfolge der Komponenten noch auf den Bereitschaftslebenszyklus der übergeordneten und untergeordneten Komponenten verlassen .

So beurteilen Sie, ob alle Unterkomponenten geladen sind

Bei der gemeinsamen Verwendung von übergeordneten und untergeordneten Komponenten, insbesondere wenn Konfigurationsinformationen von Geschäftsinformationen getrennt sind, müssen wir häufig Nach dem Unter -Komponente geladen wird, werden die zugehörigen Dienste der übergeordneten Komponente ausgeführt. Nehmen Sie die folgende Komponentenstruktur als Beispiel:

 <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>

Im obigen Beispiel müssen wir die Konfigurationsinformationen der Unterkomponente kombinieren Daher können die kombinierten Konfigurationsinformationen erst nach dem Laden aller Unterkomponenten korrekt und vollständig sein.

Wenn Sie also das Mounted-Ereignis direkt verwenden (Ready-Ereignis in 1.0), erhalten Sie definitiv falsche Ergebnisse. Um dieses Problem zu lösen, können wir genauso gut die folgende Datenstruktur und Methode erstellen:

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

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

methods : {
 /**
  * 由子组件在加载完成时调用
  */
 addColModel () {
   this.readySize ++
   // 检查进度是否设置的colSize一致
   if(this.readySize == this.colSize) {
   // 这时候所有的子组件已加载完成
   } 
 }
}

Indem wir das Konfigurationselement „colSize“ festlegen und die von der Unterkomponente aufgerufene Methode „addColModel“ überprüfen, können wir den Zeitpunkt bestimmen, zu dem alle Unterkomponenten geladen werden (die übergeordnete Komponente kann es sein oder auch nicht). zu diesem Zeitpunkt geladen), um die erforderlichen Sortiervorgänge für Konfigurationsinformationen durchzuführen.

Aber in tatsächlichen Anwendungen haben wir festgestellt, dass bei einer großen Anzahl von Unterkomponenten ein anderes Phänomen auftritt. Die Ladereihenfolge der Unterkomponenten ist zufällig Im Einklang mit der Konfigurationsreihenfolge können wir der Unterkomponente das Attribut „Reihenfolge“ wie folgt hinzufügen:

<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>

Nach dieser Verarbeitung können wir alle Unterkomponenten nacheinander sortieren geladen, wie folgt:

// 由于Vue无法确定子元素的加载顺序，必须手动指定order
this.colModel.sort((a, b) => a.order - b.order)

Fazit

Durch manuelles Hinzufügen von Hilfsvariablen und Methoden können Sie den Moment ermitteln, in dem die Unterkomponente geladen wird, um integrierte Operationen auszuführen.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Ladereihenfolge und des Ausführungsprinzips von Hochleistungs-Javascript

Eine kurze Analyse des Ladens und der Ladesequenz von CSS

HTML-, CSS- und JS-Dateiladesequenz und Ausführungsstatus

Das obige ist der detaillierte Inhalt vonDiskussion über Beispiele für die Ladereihenfolge von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!