Inzwischen wisst ihr wahrscheinlich, dass die Vue-Community seit der Veröffentlichung von Vue.js 2 schnell gewachsen ist und neben Angular und React zu den meistverwendeten JS-Frameworks gehört. Nun gibt es eine neue Version von Vue: Vue 3.0 oder auch „One Piece“ genannt. Der offizielle Release war schon im September 2020. Im laufenden Blog-Eintrag möchte ich euch die wichtigsten Infos über die Veränderungen und Verbesserungen vorstellen.

Vue 3 Änderungen und Features

Die neuere Version von Vue ist schneller, kleiner und besser wartbar.
Schneller: Vue 3 hat eine bis zu 100% bessere Update-Leistung und bis zu 200% schnellere serverseitige Renderings.

Kleiner: Durch größtenteils Löschen von nicht benutzten Bibliotheken, wie zum Beispiel Tree Shaking, haben die Entwickler von Vue es geschafft die Größe zu halbieren. Vue 2 hatte eine Größe von 20kB gezipped, was schon sehr klein war, die neuere Version ist sogar unter 10kB gezipped.

Besser wartbar: Vue 3 wird TypeScript unterstützen und zusätzlich werden die Pakete entkoppelt, wodurch alles modularer und einfacher zu warten sein wird.

Kompositions-API

Eine der wichtigsten Änderungen ist die neue API, die eine funktionsbasierte Art und Weise des Schreibens von Komponenten ermöglicht. Damit kann man Logik in “Kompositionsfunktionen” kapseln und diese Logik komponentenübergreifend wiederverwenden. Aber keine Sorge, Vue 3 ist immer noch 100% kompatibel mit der aktuellen optionsbasierten API.
Also im Gegensatz zu früher wo wir beim Erstellen von Components den Code der Komponenten durch Options trennen mussten (Data, Computed, Methods), gibt es jetzt eine setup()-Methode, die uns ermöglicht, die Kompositionssyntax zu verwenden. Jedes Stück Logik ist außerhalb dieser Methode als Kompositionsfunktion definiert.
Zusammenfassend, ist es einfach eine Funktion die Eigenschaften und Funktionen an das Template zurückgibt. Was eine gute Lösung ist für Probleme, die in Vue 2 auftraten. Wie zum Beispiel, eine gemeinsame Logik extrahieren, die von mehreren Komponenten wiederverwendet werden kann. Die neue API wird zu besser strukturiertem Code führen und könnte eine Menge an Flexibilität mitbringen.
Falls jemand innerhalb einer bestehenden Vue 2-Applikation herumexperimentieren möchte, ist die Komposition-API als Plugin verfügbar. (https://github.com/vuejs/composition-api?ref=madewithvuejs.com)

Suspense

Ein weiteres Feature, das in Vue 3 verfügbar ist, ist die Suspense Komponente. Diese ermöglicht uns das Warten auf verschachtelte asynchrone Abhängigkeiten beim initialen Rendering. In anderen Worten ist Suspense eine spezielle Komponente, die einen Fallback-Inhalt anstelle der Komponente rendert, bis eine Bedingung erfüllt ist. Diese Bedingung ist normalerweise eine asynchrone Operation, die in der Setup-Funktion Ihrer Komponente stattfindet.

V-Models

Man kann endlich so viele v-model-Deklarationen pro Komponente haben, wie man will und diese auch benennen. In Vue 2 konnte man immer nur ein v-model für eine Komponente verwenden.

Root Elemente

In Vue3 wird kein Root-Element innerhalb des Template-Tags benötigt. Das heißt man muss nicht mehr alles innerhalb eines Div-Tags schreiben.

Portals

Portale konnte man schon in Vue2 durch Plugins wie portal-vue verwenden. Mit einem Portal kann man eine Komponente an einer anderen Stelle im DOM-Baum rendern, auch wenn sich diese Stelle nicht im Scope der App befindet. Portale sind sehr gut geeignet für Modals, Benachrichtigungen und Popups. In Vue 3 kommen Portals mit nativer Unterstützung in Form einer Portal-Komponente. Sie hat nur eine Eigenschaft – Target und einen Standard-Slot. Der Inhalt des Slots wird in dem DOM-Element gerendert, das durch den Query-Selektor ausgewählt wird, der an die Target-Eigenschaft übergeben wird.

Es gibt noch weitere Änderungen und Verbesserungen. Ich habe diese gewählt, weil ich sie für besonders nützlich und wichtig gefunden habe. Was ich sehr cool finde ist, dass das Entwicklerteam auch viele Funktionen, die es in Vue 2 nur über Plugins von Drittanbieter gegeben hat, in Vue 3 eingebaut haben (z.B.: Portals).

Kurze knackige Infos

Die meisten Schlüsselkonzepte des Frameworks bleiben gleich, also man hat nicht umsonst gelernt, wenn man sich mit Vue 2 beschäftigt hat.
Viele der Änderungen sind intern, wie zum Beispiel das Schreiben der Codebasis in TypeScript. Das macht Vue schneller, heißt aber nicht, dass man TypeScript verwenden muss.
Die Kompositions-API ist rein additiv und die API, die in Vue 2 verwendet wurde, wird nicht obsolet. Alle offiziellen Bibliotheken unterstützen schon Vue 3.
Die Vue 3-Docs wurden bereits veröffentlicht, zusammen mit einem Migrations-Guide, der beschreibt, was sich geändert hat.