Was sind die neuen Funktionen von vue3.0?

Die neuen Funktionen von vue3.0 sind: 1. Die Leistung ist 1,2- bis 2-mal besser als bei vue2.x. 3. Einführung der Kompositions-API. 5. Drei neue Komponenten (Fragment, Teleport, Suspense) usw.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue Version 3.0, DELL G3-Computer.

Sechs neue Funktionen von vue3

• Leistung: 1,2 bis 2 Mal besser als vue2.
• Benutzerdefinierte React Hooks: Offengelegte benutzerdefinierte Rendering-API
• Fragment, Teleport (Protal), Suspense: Drei neue Komponenten
• Bessere TypeScript-Unterstützung: Bessere Unterstützung für TS
• Leistung

Vue3 .0 ist in Bezug auf die Leistung 1,2 bis 2 Mal schneller als Vue2.x.

Virtuelle DOM-Implementierung neu schreiben

• Laufzeitkompilierung

• Statisches Boosting und Event-Listener-Caching

• SSR-Geschwindigkeitsverbesserung

• Three-Shaking-Unterstützung

Vue3. Die Kern-APIs in Mehr Funktionen und kleinere Größe.

Kompositions-API

In Vue2. Daher hat Vue3.x die Composition API (Composition API) eingeführt, die reine Funktionen zum Teilen und Wiederverwenden von Code verwendet. Ähnliches Konzept wie React Hooks.

Bessere Wiederverwendung der Logik und Codeorganisation

Bessere Typinferenz

• Fragment, Teleport, Suspense

Drei neue Komponenten. Fragment

Da beim Schreiben von Vue2.x die Komponente ein Wurzelknoten sein muss, werden häufig einige bedeutungslose Knoten zum Umschließen hinzugefügt. Zur Lösung dieses Problems wird die Fragment-Komponente verwendet (dies ist dieselbe wie die Fragment-Komponente in React).

Teleport

Teleport ist eigentlich das Portal in React. Portal bietet eine hervorragende Lösung zum Rendern untergeordneter Knoten in DOM-Knoten, die außerhalb der übergeordneten Komponente vorhanden sind.

Ein typischer Anwendungsfall für ein Portal ist, wenn die übergeordnete Komponente einen Overflow: Hidden- oder Z-Index-Stil hat, die untergeordnete Komponente jedoch visuell aus ihrem Container „herausspringen“ muss. Zum Beispiel Dialogfelder, schwebende Karten und Eingabeaufforderungsfelder.

Suspense

Auch dies ist dasselbe wie Suspense in React.

Suspense lässt Ihre Komponente vor dem Rendern „warten“ und zeigt während des Wartens den Fallback-Inhalt an.

Bessere TypeScript-Unterstützung

Vue3.x wird in TypeScript neu geschrieben. Entwickler können den Komfort, den TS beim Codieren bietet, bei der Verwendung von Vue3.x in vollem Umfang erleben.

Benutzerdefinierte Renderer-API

Diese API definiert die Rendering-Regeln des virtuellen DOM, was bedeutet, dass mit einer benutzerdefinierten API plattformübergreifende Zwecke erreicht werden können.

Abschließend: Wie wird Vue3.0 schneller?

Diff-Algorithmus-Optimierung

• Der virtuelle Dom in Vue2 wird vollständig verglichen.
  Vue3 fügt statische Tags hinzu. Es wird jedes Mal neu erstellt und dann
  • Vue3 für Elemente gerendert, die nicht an Aktualisierungen teilnehmen. Diese werden statisch hochgestuft. Sie werden nur einmal erstellt und können direkt während des Rendering-Ereignisses
cacheHandlers wiederverwendet werden Listener-Cache

• Standardmäßig wird onClick als dynamische Bindung betrachtet, sodass seine Änderungen jedes Mal nachverfolgt werden. Da es sich jedoch um dieselbe Funktion handelt, können Änderungen nicht direkt zwischengespeichert und wiederverwendet werden
  • SSR-Rendering
Wenn eine große Menge an statischem Inhalt vorhanden ist, wird der Inhalt als reine Zeichenfolge in einen Puffer verschoben. Selbst wenn eine dynamische Bindung vorliegt, wird er durch Vorlageninterpolation eingebettet schneller als das Rendern über virtuelles DOM

• Wenn der statische Inhalt ein bestimmtes Niveau erreicht, wird die Methode _createStaticVNode verwendet, um einen statischen Knoten auf der Clientseite zu generieren. Diese statischen Knoten sind direkt innerHtml, sodass keine Objekte erstellt und dann basierend auf den Objekten gerendert werden müssen.

  Weitere Programmierkenntnisse finden Sie unter:
Programmiervideo
• ! !

Das obige ist der detaillierte Inhalt vonWas sind die neuen Funktionen von vue3.0?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!