Warum verwendet Vue asynchrone Komponenten?

Gründe für die Verwendung asynchroner Komponenten: 1. Asynchrone Komponenten können die Ergebnisse der Verpackung verringern. Asynchrone Komponenten werden separat verpackt und Komponenten werden asynchron geladen, wodurch das Problem einer zu großen Komponente effektiv gelöst werden kann. 2. Der Kern der asynchronen Komponente kann als Funktion definiert werden, und die Importsyntax kann in der Funktion verwendet werden, um das geteilte Laden von Dateien zu realisieren.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Gründe für die Verwendung asynchroner Komponenten

1. Asynchrone Komponenten können die Verpackungsergebnisse verringern. Asynchrone Komponenten werden separat verpackt und Komponenten werden asynchron geladen, wodurch das Problem einer zu großen Komponente effektiv gelöst werden kann. Ohne die Verwendung asynchroner Komponenten wird das Paketergebnis größer, wenn die Komponente über mehr Funktionen verfügt.

2. Der Kern der asynchronen Komponente kann als Funktion definiert werden, um das geteilte Laden von Dateien zu realisieren. Die Importsyntax wird von Webpack bereitgestellt. (Lernvideo-Sharing: vuejs Einführungs-Tutorial, Grundlegendes Programmiervideo)

components:{
  VideoPlay:(resolve)=>import("../components/VideoPlay")
}
 
components:{
  VideoPlay(resolve) {
    require(["../components/VideoPlay"], resolve)
  }
}
 
或者使用回调函数

Prinzip

In der createComponent-Methode wird zunächst eine asynchrone Komponentenverarbeitung definiert und dann ermittelt, ob es sich bei der Komponente um eine handelt Rufen Sie dann die Methode „resolveAsyncComponent“ auf und übergeben Sie dann die der asyncFactory zugewiesene Funktion. Bei der Ausführung wird das Ergebnis nicht sofort zurückgegeben, da es asynchron ist und ein Versprechen zurückgibt Der Wert ist undefiniert, und dann wird zuerst ein Platzhalter für eine asynchrone Komponente, ein leerer virtueller Knoten, gerendert. Wenn nach dem Laden die Factory-Funktion aufgerufen wird, werden die beiden Parameter „resolve“ und „reject“ zurückgegeben. Wenn das Versprechen erfolgreich ist, wird die Methode „resolve“ aufgerufen Wird in „resolve“ aufgerufen, um ein erneutes Rendern der Aktualisierungsansicht zu erzwingen. In „forceRender“ wird das Ergebnis auf „factory.resolved“ abgelegt. Wenn die Aktualisierung erzwungen wird, wird die Methode „resolveAsyncComponent“ erneut verwendet Wenn ein erfolgreiches Ergebnis vorliegt, wird das Ergebnis direkt zurückgesetzt. Zu diesem Zeitpunkt ist der Rückgabewert von „resolveAsyncComponent“ nicht undefiniert und die Komponente wird erstellt, initialisiert und gerendert. Quellcode s Einführungs-Tutorial

,

Grundlegendes Programmiervideo

)

Das obige ist der detaillierte Inhalt vonWarum verwendet Vue asynchrone Komponenten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!