So bedienen Sie die Vue-Ladereihenfolge

Dieses Mal zeige ich Ihnen, wie Sie die Vue-Ladesequenz bedienen und welche Vorsichtsmaßnahmen für die Bedienung der Vue-Ladesequenz gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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

1. Vom Vater zum Sohn kommt immer das Erschaffen

Die erstellte Lebenszyklusfunktion wird immer in der Reihenfolge vom Elternteil zum Kind ausgeführt, die Brüder werden jedoch nicht strikt in dieser Reihenfolge ausgeführt. Es wird geschätzt, dass eine asynchrone Funktion verwendet wird befindet sich in der übergeordneten Komponente. Die Einfügereihenfolge ist ebenfalls zufällig und es gibt keine spezielle Regel. Gehen Sie davon aus, dass auf die Unterkomponenten in der folgenden Reihenfolge verwiesen wird:

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

Wenn Sie die $children-Referenz verwenden, 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

Meiner Einschätzung nach sollte die Reihenfolge der übergeordneten und untergeordneten Komponenten zuerst untergeordnet und dann übergeordnet sein, um sicherzustellen, dass die Komponenten vollständig geladen sind. Aus praktischen Beispielen geht jedoch hervor, dass die übergeordnete Komponente manchmal überhaupt nicht geordnet ist wird zuerst geladen, und manchmal werden Unterkomponenten zuerst geladen, daher dürfen Sie sich in der

Programmierpraxis nicht auf deren Ladereihenfolge verlassen.

3. Fazit

Wenn Sie in der Praxis sicherstellen müssen, dass Komponenten der Reihe nach 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 wurden

Bei der gemeinsamen Verwendung von übergeordneten und untergeordneten Komponenten, insbesondere wenn Konfigurationsinformationen von Geschäftsinformationen getrennt sind, müssen wir häufig die zugehörigen Dienste der übergeordneten Komponente ausführen, nachdem alle untergeordneten Komponenten geladen wurden. 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 Unterkomponenten kombinieren. Daher können die kombinierten Konfigurationsinformationen nur dann korrekt und vollständig sein, wenn alle Unterkomponenten geladen sind.

Wenn Sie also das Mounted-Ereignis (Ready-Ereignis in 1.0) direkt verwenden, erhalten Sie definitiv falsche Ergebnisse. Um dieses Problem zu lösen, können wir auch 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 zu diesem Zeitpunkt geladen sein oder nicht). Vornehmen der erforderlichen Konfigurationen. Informationssortiervorgänge.

In tatsächlichen Anwendungen haben wir jedoch festgestellt, dass bei einer großen Anzahl von Unterkomponenten ein anderes Phänomen auftritt. Die Ladereihenfolge der Unterkomponenten tritt zufällig auf, wenn wir sicherstellen möchten, dass die Ladereihenfolge mit der Konfigurationsreihenfolge übereinstimmt , können wir das Attribut „Order“

wie folgt hinzufügen. Der neueste Konfigurationsinhalt lautet wie folgt:

<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 einer solchen Verarbeitung können wir alle Unterkomponenten nach dem Laden wie folgt sortieren:

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

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Informationen zahlen Sie bitte Achten Sie auf andere verwandte Themen im Artikel über die chinesische PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung zum Abrufen des aktuellen geografischen Standortfalls mit JS

parabola.js implementiert Parabola und Funktion zum Hinzufügen zum Warenkorb

Das obige ist der detaillierte Inhalt vonSo bedienen Sie die Vue-Ladereihenfolge. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!