Vue 3.5 Release

Vue.js 3.5 ist offiziell veröffentlicht, und diese Version bringt einige beeindruckende Updates. Von Performance-Optimierungen bis hin zu neuen Möglichkeiten im Server-Side-Rendering (SSR) gibt es viel zu entdecken. In diesem Artikel werfen wir einen Blick auf die spannendsten Neuerungen und erklären, was diese für die Entwicklung mit Vue.js bedeuten.

Performance-Verbesserungen

Das Reaktivitätssystem von Vue wurde erneut überarbeitet, was zu einer besseren Performance und deutlich geringerem Speicherverbrauch führt. Besonders bei großen, tief verschachtelten reaktiven Arrays gibt es jetzt eine effizientere Reaktivitätsverfolgung, die laut dem offiziellen Blog-Post manche Operationen bis zu 10-mal schneller machen kann. Das Beste daran: Es handelt sich um interne Änderungen, sodass wir unseren Code nicht anpassen müssen, um von diesen Verbesserungen zu profitieren.

SSR Features

Es gibt einige neue SSR-Funktionen, wie das useId()-Composable, welches dafür sorgt, dass der gleiche Wert sowohl auf dem Server als auch auf dem Client verwendet wird, um Hydrationsfehler zu vermeiden. Es kann zudem verwendet werden, um IDs für Formularelemente und Barrierefreiheits-Attribute zu erzeugen.

<script setup>
import { useId } from 'vue'

const id = useId()
</script>

<template>
  <form>
    <label :for="id">Name:</label>
    <input :id="id" type="text" />
  </form>
</template>

Ein weiteres SSR-Feature ist die sogenannte Lazy Hydration. Dieses Feature gibt uns mehr Kontrolle darüber, wann das JavaScript für bestimmte Komponenten geladen und ausgeführt wird. Anstatt die gesamte App beim Seitenladen zu hydrieren, können wir festlegen, dass einige Komponenten erst hydriert werden, wenn sie sichtbar auf dem Bildschirm sind. Das ist nur ein Beispiel, wie das genutzt werden kann. Die Kern-API ist ziemlich low-level gehalten, die die meisten von uns nicht direkt verwenden werden. Das Nuxt-Team arbeitet zum Beispiel bereits an Komponenten und Lösungen, welche diese Funktion ergänzen.

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: hydrateOnVisible()
})

Wenn es unvermeidlich ist, dass sich ein Wert auf dem Client von dem auf dem Server unterscheidet (zum Beispiel bei Datumsangaben), können wir jetzt die entsprechenden Warnungen über Abweichungen mit dem Attribut data-allow-mismatch einfach unterdrücken.

<span data-allow-mismatch>{{ data.toLocaleString() }}</span>

Weitere Features

Ein paar kleinere Features wurden ebenfalls in dieser Version eingeführt. Zum einen ist das Feature Reactive Props Destructure jetzt stabil und standardmäßig aktiviert. Das bedeutet, wir können Code wie den folgenden schreiben, und die Werte sind weiterhin reaktiv, was vorher nicht der Fall war. Außerdem können wir so endlich auch Standardwerte einfacher definieren, anstatt das Compiler-Makro withDefaults verwenden zu müssen:

const { count = 0, msg = 'hello' } = defineProps<{
  count?: number
  message?: string
}>()

Der Zugriff z. B. auf count, wird vom Compiler automatisch in props.count kompiliert, so die Reaktivität erhalten bleibt. Ein wichtiger Hinweis ist, dass wir beim Nutzen der destrukturierten Werte in watch oder beim Weiterreichen an ein Composable zum Beispiel, nun Getter verwenden müssen, um die Reaktivität zu erhalten.

watch(() => count /* ... */)

useDynamicCount(() => count)

Ein weiteres spannendes Feature ist Deferred Teleports. Bisher konnten wir Teleport verwenden, um Teile unserer Komponente an einen anderen Teil des DOM zu verschieben. Das hatte allerdings den Nachteil, dass das Ziel bereits im DOM vorhanden sein musste, bevor unsere Komponente gerendert wurde. Mit Deferred Teleport können wir nun das Teleport so einstellen, dass es nach dem aktuellen Renderzyklus verschoben wird, was uns mehr Flexibilität bietet.

<Teleport defer target="#container">...</Teleport>

Fazit

Vue 3.5 bringt viele Verbesserungen, die nicht nur die Performance erhöhen, sondern auch die DX optimieren. Es gibt zahlreiche kleine und große Änderungen, die Vue.js weiter modernisieren und effizienter gestalten. Für mehr Informationen rund im das Update solltet ihr unbedingt den offiziellen Blogeintrag lesen: https://blog.vuejs.org/posts/vue-3-5