Seite 3: Bessere Reaktivität

Die Version 2 von Vue.js hielt die Implementierung und die Funktionsweise des Reactivity-Systems weitgehend unter Verschluss. Obwohl Entwickler keinen direkten Zugriff darauf hatten, konnten sie die Funktionen im Code nutzen. Dass das Framework die Details versteckte, führte in der Community zu mehr Verwirrung als Hilfe. Vue.js 3 bietet explizite Wege, um etwas als reaktiv zu kennzeichnen. Eine reaktive Referenz erfordert das Einbinden der Funktion ref:

import { ref, computed } from 'vue';
const name = ref("Fabian Deitelhoff");

Sie kapselt skalare Typen, die dadurch veränderbar (mutable) sind. Daten lassen sich über die Eigenschaft .value direkt lesen und schreiben. In Vue-Templates ist der Zugriff über .value nicht erforderlich, da die Werte automatisch ausgepackt (unwrapped) werden:

<template>  
    <div>
        <label>Name: </label>
        <input v-model="name">
    </div>
</template>

Für Objekte existiert die Funktion reactive. Mit dem Wrapper erstellt das Framework einen tiefen Proxy (deep proxy/wrapper), wodurch das vollständige Objekt reaktiv ist:

const address = reactive({
  city: "Dortmund",
  postalCode: "12345"
});

Dieses Vorgehen funktioniert ebenso für Arrays und hat zahlreiche Vorteile, weil Änderungen an einem Array in einigen Fällen nicht mehr über spezielle set-Methode (Vue.set oder this.$set) von Vue.js vorgenommen werden müssen, damit das Reactivity System davon erfährt. Das war früher auch bei Objekten in einigen Situationen erforderlich.

Fragmente und native Portale

Bei den Vue.js-Templates hat sich ebenfalls einiges getan. Nennenswert sind die sogenannten Fragmente, die aus anderen Webframeworks wie React bekannt sind: In Vue.js 3 muss ein Template nicht mehr wie bisher genau ein root-Element besitzen:

<template>
  <div>Hallo</div>
  <div>Welt</div>
</template>

In Vue.js 2 lässt sich das Vorgehen über eine Bibliothek wie vue-fragment realisieren, was in Vue.js 3 nicht mehr notwendig ist.

Eine weitere Neuerung sind die nativen Portale, die bei Vue.js 3 Teleports heißen. Damit trägt das Framework der Empfehlung Rechnung, dass ein User Interface eine Orchestrierung unterschiedlicher Komponenten ist, und dabei kommt es häufig vor, dass eine Kindkomponente etwas im globalen Kontext rendern möchte. Logisch gesehen mag ein Teil vom Template wie ein modaler Dialog zur Komponente gehören, aus der technischen Perspektive gehört dieser Teil jedoch zum DOM außerhalb der Komponente. Zwar existieren Tricks wie ein angepasster z-Index für das Auslagern, die aber nicht sauber sind. Mit den Teleports lässt sich neuerdings ein Teil eines Template an einem anderen Ort rendern. Das folgende Snippet schickt den Inhalt des Teleports zum body-Tag:

<teleport to="body">
  <div>… </div>
</teleport>

Das Ziel des Attributs to kann nicht nur ein HTML-Tag, sondern unter anderem eine ID sein:

<teleport to="#modals">
  <div>…</div>
</teleport>
<div id="modals">
</div>

Ebenso lassen sich mehrere Teleports für ein Ziel nutzen. Das Ergebnis ist eine Kombination der HTML-Fragmente am Ziel, in dem die Inhalte aneinandergefügt sind. Das Attribut to muss ein valider Query Selector sein. Das erlaubt eine Vielzahl von Anwendungsfällen. Die API-Dokumentation verdeutlicht das Vorgehen weiter. Zum Umsetzen einer ähnlichen Funktionsweise existieren zahlreiche Bibliotheken wie portal-vue für Vue.js 2.