Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 52

Javascript-Frameworks: Neue Gestaltungsfreiräume mit Vue

Seite 2 / 2

Das Template enthält neben einigen bekannten HTML-Tags auch etliche Vue-spezifische Erweiterungen. Ein wichtiges Vue-Element ist die Interpolation. Hierbei ersetzt Vue Variablen im Template durch ihre Entsprechungen aus dem Javascript-Teil. Ändert sich der Wert in Javascript, passt sich die Repräsentation der Komponente im HTML entsprechend an. Die Werte für die ­Variablen stammen vom Rückgabewert der data-Methode der Komponente. Das Template enthält zwei Attribute mit einem vorangestellten v-: Beispiele für Vue-Direktiven, die die HTML-Struktur um Funktionen erweitern. Der Befehl v-on:click bindet die als Wert angegebene Methode als Eventhandler für das Click-Event des Buttons. Eine kürzere Schreibweise dieses Attributs ist ­­@click="handleClick". Die Callback-Funktion, die als Handler für das Event dient, stammt aus der Methods-Eigenschaft der Komponente. Die Direktive v-if sorgt dafür, dass die Anwendung das Element nur rendert, wenn die Bedingung den Wert true ­ergibt. Im Falle des Beispiels bedeutet das, dass das h1-Element erst zu sehen ist, wenn der Nutzer auf den Button geklickt hat. Neben den bereits erwähnten Data- und Methods-­Eigenschaften der Komponente gibt es noch weitere. Dazu gehört beispielsweise die Name-Eigenschaft, die den Namen der Komponente enthält. Jede Komponente hat einen Lebenszyklus, den Entwickler mit verschiedenen Lifecycle-Hooks beeinflussen können. Diese Hooks sind beforeCreate, create, ­beforeMount, mounted, beforeUpdate, updated, beforeDestroy und ­destroyed. Diese Hooks definiert der Code jeweils als Methode der Komponente und führt sie an den jeweiligen Stellen des Lebenszyklus aus. So ist der beforeCreate-Hook der erste und der destroyed-Hook der letzte Hook, den die Anwendung ausführt. Die beiden ­Update-Hooks laufen während aller Datenänderungen immer wieder.

Datenfluss im Komponentenbaum

Auch wenn eine Vue-Applikation, wie bereits erwähnt, nicht nur aus einer riesigen Komponente bestehen sollte, bringt die Baumstruktur aus Komponenten auch ihre Probleme mit sich. Die ­Applikationsdaten zur Steuerung und Anzeige müssen nämlich an die richtige Stelle im Baum gelangen – was sich jedoch nicht negativ auf die Performance der Applikation auswirken darf. Eine Lösung, die auch einige andere Frameworks an dieser Stelle verfolgen: Änderungen gibt die Anwendung als Eigenschaften (sogenannte Props) von den Eltern- an die Kindkomponenten weiter. Stammen die Änderungen von den Kindkomponenten, gelangen sie als Events im Baum nach oben. Das erleichtert es dem Framework, Änderungen zu verfolgen.

Mit Vue können Entwickler ihre Anwendungen komponentenbasiert aufbauen. Jede Komponente sollte nur eine einzige Aufgabe und Datei haben, damit sie sich optimal wiederverwenden und testen lässt. (Screenshot: Vue)

Zunächst müssen Entwickler dazu die Props in der Kindkomponente definieren. Dies geschieht als Array in der Eigenschaft props der Komponente. In der Elternkomponente geben sie die Props als Attribute im Tag an, der die Kindkomponente einbindet. Dabei müssen sie die Namen der Props im Javascript mit Camel-Case und im Template mit Kebab-Case schreiben. Soll die Anwendung dynamische Werte übergeben, ist die Direktive v-bind erforderlich. Die Name-Prop lässt sich zum Beispiel durch v-bind:name="someValue" verbinden. Um eine Elternkomponente auf ein Event der Kindkomponente zu binden, nutzen Entwickler die v-on-Direktive (wie schon beim click-Event). Als Name des Events können sie eine beliebige Zeichenkette wählen. In der Kindkomponente kann dann die $emit-Methode ein Event auslösen. Der erste Parameter der Methode ist der Name des auszulösenden Events. Der zweite bestimmt die Information, die das Event erhalten soll. Auf diesen Wert können Entwickler im Eventhandler zugreifen.

Vue-Router – Navigation in einer Vue-Applikation

Wer eine Vue-Applikation mit der CLI initialisiert, kann den Vue-Router gleich zu Beginn integrieren. Der Router koppelt verschiedene App-Bildschirme an URL-Pfade und ermöglicht so die Navigation innerhalb der Single-Page-Applikation, ohne dass die Seite neu laden muss. Eine Route definiert dabei einen Baum von Komponenten, der sich bei der Aktivierung der Route lädt. Bei der Integration des Routers in die Applikation müssen Entwickler zuerst die Komponenten definieren und anschließend die Routen in Form eines Arrays, welches die Beschreibung der Routen in Form von Objekten enthält. Die Path-Eigenschaft gibt den ­Routing-Pfad an, über den sich die Komponente ansprechen lässt. Die Eigenschaft component verweist auf die zu ladende Komponente. Mit dieser Routendefinition können Programmierer eine neue Instanz der VueRouter-Klasse erzeugen, die dann an das zentrale Vue-Objekt der Applikation geht. In der Applikation kann der Entwickler dann entweder über das Tag router-link im Template oder über das Objekt $router navigieren. Der Vue- Router unterstützt nicht nur das einfache Laden von Komponenten, sondern auch weitere Funktionen wie Variablen in Routen, verschachtelte Routen, Weiterleitungen und benannte Views.

Vuex – State-Management in Vue

Jede Vue-Komponente ist in der Lage, ihren eigenen Zustand ­(State) zu verwalten. In Komponentenbäumen ist dies jedoch schon etwas schwieriger, da die Anwendung Teile des States an die Kindkomponenten weitergeben können muss. Je tiefer der Baum, desto aufwändiger wird es, die Informationen weiterzureichen. Um dieses Problem zu lösen, gibt es das Werkzeug Vuex, das den Zustand einer Applikation verwaltet. Die Bibliothek ist von der Idee der Flux-Architektur inspiriert. Das zentrale Element ist der Store. Dieser hält den Application-State, der die ­State-Eigenschaft speichert. Ein lesender Zugriff auf den State ist problemlos möglich. Der Store ist reaktiv, das bedeutet, dass sich Änderungen auf alle Komponenten auswirken, die aus dem ­Store lesen. Um die Auswirkungen besser kontrollieren zu können, können Entwickler den State jedoch nicht direkt modifizieren. Sie müssen solche Änderungen über das Objekt Actions durchführen, das die Änderung im Store beschreibt. Die Methode commit des Stores aktiviert sie. Der Store wiederum definiert über die Eigenschaft „mutations“ eine Reihe von Methoden, die den State verändern, sobald es eine entsprechende Aktion gibt. Dieses Architekturmuster ist zwar etwas aufwändiger zu implementieren, funktioniert jedoch auch für sehr umfangreiche Applikationen.

Fazit

Vue ist eine echte Konkurrenz für Angular und React. Alle drei Frameworks verfolgen unterschiedliche Ansätze, haben allerdings auch zahlreiche Gemeinsamkeiten, gerade wenn es um die Komponentenorientierung oder das Databinding geht. Auch die Lifecycle-Hooks finden sich in allen Frameworks wieder. Viele Funktionen, die das Framework nicht per se bietet, lassen sich durch Community-Pakete ergänzen. Die Stärken von Vue sind ganz klar seine Einfachheit, Flexibilität, seine geringe Einstiegshürde und die stetig wachsende Community.

Startseite
  • Seite:
  • 1
  • 2

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
Stilwaechter

Danke für die übersichtliche Zusammenfassung! Habe jetzt schon von mehreren Stellen Liebesgedichte an Vue gehört, scheinbar sollte man sich das mal genauer ansehen ;)

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden