Vue 3.5 "Tengen Toppa Gurren Lagann" veröffentlicht

xguru · 2024-09-06T10:16:02+09:00

Diese Minor-Version enthält interne Verbesserungen und nützliche neue Funktionen, ohne Breaking Changes bei der Kompatibilität. Optimierung des Reactivity-Systems Das reaktive System von Vue wurde in großem Umfang refaktoriert, was zu Leistungssteigerungen und geringerem Speicherverbrauch (-56 %) geführt hat, ohne Änderungen am Verhalten. Durch das Refactoring wurden Probleme mit berechneten Werten und dem Speicher während SSR behoben. In 3.5 wurde das Reactivity-Tracking für große und tief verschachtelte reaktive Arrays optimiert, wodurch es in einigen Fällen bis zu 10-mal schneller ist. Reactive Props Destructure Die reaktive Destrukturierung von Props ist in 3.5 stabilisiert und standardmäßig aktiviert. In sind aus dem defineProps-Aufruf destrukturierte Variablen jetzt reaktiv. Diese Funktion vereinfacht die Deklaration von Props mit Standardwerten erheblich, indem sie die native Default-Value-Syntax von JavaScript nutzt. SSR-Verbesserungen Lazy Hydration Asynchrone Komponenten können jetzt den Zeitpunkt der Hydration steuern, indem sie über die Option hydrate der API defineAsyncComponent() eine Strategie angeben. useId() useId() ist eine API, mit der pro Anwendung eindeutige IDs erzeugt werden können, die bei Server- und Client-Rendering stabil garantiert sind. Sie kann zum Erzeugen von IDs für Formularelemente und Accessibility-Attribute verwendet werden und ist in SSR-Anwendungen ohne Hydration-Mismatches nutzbar. data-allow-mismatch Wenn sich Client-Werte zwangsläufig von Server-Werten unterscheiden müssen (z. B. bei Datumswerten), können Warnungen zu Hydration-Mismatches mit dem Attribut data-allow-mismatch unterdrückt werden. Durch Angabe eines Werts im Attribut lässt sich der erlaubte Typ des Mismatchs einschränken (text, children, class, style, attribute). Verbesserungen bei Custom Elements 3.5 behebt viele langjährige Probleme rund um die API defineCustomElement() und fügt mehrere neue Funktionen für das Schreiben von Custom Elements mit Vue hinzu. Unterstützung für App-Konfigurationen von Custom Elements über die Option configureApp. Hinzugefügt wurden die APIs useHost(), useShadowRoot() und this.$host, um auf das Host-Element und die Shadow Root von Custom Elements zuzugreifen. Es wird unterstützt, Custom Elements ohne Shadow DOM zu mounten, indem shadowRoot: false übergeben wird. Es wird unterstützt, die Option nonce bereitzustellen, die an von Custom Elements injizierte -Tags angehängt wird. Weitere bemerkenswerte Funktionen useTemplateRef() 3.5 führt mit der API useTemplateRef() einen neuen Weg ein, um Template-Referenzen zu erhalten. Vor 3.5 wurde empfohlen, normale Refs zu verwenden, bei denen der Variablenname mit einem statischen ref-Attribut übereinstimmt. Der bisherige Ansatz war auf statische ref-Attribute beschränkt, da das ref-Attribut vom Compiler analysierbar sein musste. Im Gegensatz dazu gleicht useTemplateRef() Referenzen über eine Runtime-String-ID ab und unterstützt dadurch dynamische Ref-Bindings für sich ändernde IDs. Deferred Teleport Eine bekannte Einschränkung der eingebauten Komponente bestand darin, dass das Zielelement vorhanden sein musste, wenn die Teleport-Komponente gemountet wurde. Dadurch wurde verhindert, dass Nutzer Inhalte in andere von Vue gerenderte Elemente teleportieren konnten. In 3.5 wurde dafür das Prop defer für eingeführt, das nach dem aktuellen Rendering-Zyklus gemountet wird, sodass dies jetzt funktioniert. onWatcherCleanup() 3.5 führt onWatcherCleanup() ein, eine global importierbare API zum Registrieren von Cleanup-Callbacks in Watchern.

(blog.vuejs.org)

6 Punkte von xguru 2024-09-06 | 3 Kommentare | Auf WhatsApp teilen

Diese Minor-Version enthält interne Verbesserungen und nützliche neue Funktionen, ohne Breaking Changes bei der Kompatibilität.

Optimierung des Reactivity-Systems

Das reaktive System von Vue wurde in großem Umfang refaktoriert, was zu Leistungssteigerungen und geringerem Speicherverbrauch (-56 %) geführt hat, ohne Änderungen am Verhalten.
Durch das Refactoring wurden Probleme mit berechneten Werten und dem Speicher während SSR behoben.
In 3.5 wurde das Reactivity-Tracking für große und tief verschachtelte reaktive Arrays optimiert, wodurch es in einigen Fällen bis zu 10-mal schneller ist.

Reactive Props Destructure

Die reaktive Destrukturierung von Props ist in 3.5 stabilisiert und standardmäßig aktiviert.
In <script setup> sind aus dem defineProps-Aufruf destrukturierte Variablen jetzt reaktiv.
Diese Funktion vereinfacht die Deklaration von Props mit Standardwerten erheblich, indem sie die native Default-Value-Syntax von JavaScript nutzt.

SSR-Verbesserungen

Lazy Hydration

Asynchrone Komponenten können jetzt den Zeitpunkt der Hydration steuern, indem sie über die Option hydrate der API defineAsyncComponent() eine Strategie angeben.

useId()

useId() ist eine API, mit der pro Anwendung eindeutige IDs erzeugt werden können, die bei Server- und Client-Rendering stabil garantiert sind.
Sie kann zum Erzeugen von IDs für Formularelemente und Accessibility-Attribute verwendet werden und ist in SSR-Anwendungen ohne Hydration-Mismatches nutzbar.

data-allow-mismatch

Wenn sich Client-Werte zwangsläufig von Server-Werten unterscheiden müssen (z. B. bei Datumswerten), können Warnungen zu Hydration-Mismatches mit dem Attribut data-allow-mismatch unterdrückt werden.
Durch Angabe eines Werts im Attribut lässt sich der erlaubte Typ des Mismatchs einschränken (text, children, class, style, attribute).

Verbesserungen bei Custom Elements

3.5 behebt viele langjährige Probleme rund um die API defineCustomElement() und fügt mehrere neue Funktionen für das Schreiben von Custom Elements mit Vue hinzu.
Unterstützung für App-Konfigurationen von Custom Elements über die Option configureApp.
Hinzugefügt wurden die APIs useHost(), useShadowRoot() und this.$host, um auf das Host-Element und die Shadow Root von Custom Elements zuzugreifen.
Es wird unterstützt, Custom Elements ohne Shadow DOM zu mounten, indem shadowRoot: false übergeben wird.
Es wird unterstützt, die Option nonce bereitzustellen, die an von Custom Elements injizierte <style>-Tags angehängt wird.

Weitere bemerkenswerte Funktionen

useTemplateRef()

3.5 führt mit der API useTemplateRef() einen neuen Weg ein, um Template-Referenzen zu erhalten.
Vor 3.5 wurde empfohlen, normale Refs zu verwenden, bei denen der Variablenname mit einem statischen ref-Attribut übereinstimmt.
Der bisherige Ansatz war auf statische ref-Attribute beschränkt, da das ref-Attribut vom Compiler analysierbar sein musste.
Im Gegensatz dazu gleicht useTemplateRef() Referenzen über eine Runtime-String-ID ab und unterstützt dadurch dynamische Ref-Bindings für sich ändernde IDs.

Deferred Teleport

Eine bekannte Einschränkung der eingebauten Komponente <Teleport> bestand darin, dass das Zielelement vorhanden sein musste, wenn die Teleport-Komponente gemountet wurde.
Dadurch wurde verhindert, dass Nutzer Inhalte in andere von Vue gerenderte Elemente teleportieren konnten.
In 3.5 wurde dafür das Prop defer für <Teleport> eingeführt, das nach dem aktuellen Rendering-Zyklus gemountet wird, sodass dies jetzt funktioniert.

onWatcherCleanup()

3.5 führt onWatcherCleanup() ein, eine global importierbare API zum Registrieren von Cleanup-Callbacks in Watchern.

3 Kommentare

2024-09-06

[Dieser Kommentar wurde ausgeblendet.]

narusas 2024-09-06

Mit diesem Release ist der Komfort bei der tatsächlichen Komponentenentwicklung wirklich enorm gestiegen.

xguru 2024-09-06

Der Name dieser Version ist also "Tengen Toppa Gurren Lagann". (Ein Meisterwerk! Soweit ich weiß, ist das wohl das Letzte von Gainax, das ich gesehen habe.)

Vue hat traditionell? Titel aus Mangas übernommen. 1.0 war Evangelion, 2.0 Ghost in the Shell, 3.0 One Piece, 3.3 Rurouni Kenshin, 3.4 Slam Dunk
https://en.wikipedia.org/wiki/Vue.js#Versions