Vue.js E-Book

Fabian Deitelhoff

• Herausgeber: dpunkt.verlag
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Deutsch
• Veröffentlichungsjahr: 2022

Seitenzahl: 437

Beschreibung

Dein Einstieg in Vue.js

• Umfassender Einstieg in Vue.js
• alle Neuheiten von Vue 3 ausführlich erklärt
• Entwicklung einer Vue-Anwendung von Projekt aufsetzen bis Deployment
• Hinweise zu Stolpersteinen von Vue 2 und Unterschieden zur aktuellen Vue-Version
• Code-Beispiele und Praxistipps

Jetzt ist der richtige Zeitpunkt, sich das Web-Framework Vue einmal genauer anzusehen. Vue 3 ist endlich die aktuelle Standardversion und die Community wächst und wächst.

Dieses Buch ist ein praxisnaher Einstieg für alle, die sich Vue einmal genauer ansehen möchten. Der Autor erklärt den komponentenbasierte Ansatz, wie dieser umgesetzt wird und natürlich was für Vorteile er hat. Die Neuerungen von Vue 3 werden detailliert erklärt. Und wer noch mit Vue 2 arbeiten muss oder möchte, findet hier hilfreiche Tipps und Hinweise zu Unterschieden und Stolpersteinen. Alles natürlich mit vielen Code-Beispielen und praktischen Tipps aus der Webentwicklung von Projektstart, über Architektur bis Testen und Deployment.

Leseprobe

Foto: Ailona Kardash/TU Dortmund

Dr. Fabian Deitelhoff arbeitet nach seiner Promotion zu »Source Code Comprehension« als Tech-Lead Domestics an Cloud-Themen bei Miele. Darüber hinaus ist er mit brickobotik in der MINT-Bildung und mit Loosely in der Cross-Plattform-Softwareentwicklung tätig. Seine Schwerpunkte sind Low- und No-Code sowie digitale Geschäftsmodelle. Daneben ist er als freier Autor, Dozent und Softwareentwickler im .NET- und Web-Umfeld tätig. Sie erreichen ihn über deitelhoff.me, unter [email protected] oder auf Twitter als @FDeitelhoff.

Copyright und Urheberrechte:

Die durch die dpunkt.verlag GmbH vertriebenen digitalen Inhalte sind urheberrechtlich geschützt. Der Nutzer verpflichtet sich, die Urheberrechte anzuerkennen und einzuhalten. Es werden keine Urheber-, Nutzungs- und sonstigen Schutzrechte an den Inhalten auf den Nutzer übertragen. Der Nutzer ist nur berechtigt, den abgerufenen Inhalt zu eigenen Zwecken zu nutzen. Er ist nicht berechtigt, den Inhalt im Internet, in Intranets, in Extranets oder sonst wie Dritten zur Verwertung zur Verfügung zu stellen. Eine öffentliche Wiedergabe oder sonstige Weiterveröffentlichung und eine gewerbliche Vervielfältigung der Inhalte wird ausdrücklich ausgeschlossen. Der Nutzer darf Urheberrechtsvermerke, Markenzeichen und andere Rechtsvorbehalte im abgerufenen Inhalt nicht entfernen.

Fabian Deitelhoff

Vue.js

Von Grundlagen bis Best Practices

Fabian Deitelhoff

[email protected]

Lektorat: Melanie Andrisek

Lektoratsassistenz: Anja Weimer

Copy-Editing: Claudia Lötschert, www.richtiger-text.de

Satz: Gerhard Alfes, mediaservice, Siegen, www.mediaservice.tv

Herstellung: Stefanie Weidner

Umschlaggestaltung: Helmut Kraus, www.exclam.de

Bibliografische Information der Deutschen Nationalbibliothek

Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.

ISBN:

Print

978-3-86490-900-9

PDF

978-3-96910-760-7

ePub

978-3-96910-761-4

mobi

978-3-96910-762-1

1. Auflage 2022

Copyright © 2022 dpunkt.verlag GmbH

Wieblinger Weg 17

69123 Heidelberg

Hinweis:Dieses Buch wurde auf PEFC-zertifiziertem Papier aus nachhaltigerWaldwirtschaft gedruckt. Der Umwelt zuliebe verzichten wirzusätzlich auf die Einschweißfolie.

Schreiben Sie uns:

Falls Sie Anregungen, Wünsche und Kommentare haben, lassen Sie es uns wissen: [email protected].

Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne die schriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen.

Es wird darauf hingewiesen, dass die im Buch verwendeten Soft- und Hardware-Bezeichnungen sowie Markennamen und Produktbezeichnungen der jeweiligen Firmen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz unterliegen.

Alle Angaben und Programme in diesem Buch wurden mit größter Sorgfalt kontrolliert. Weder Autor noch Verlag können jedoch für Schäden haftbar gemacht werden, die in Zusammenhang mit der Verwendung dieses Buches stehen.

5 4 3 2 1 0

Für meine wundervolle Frau Sandra –mit deiner Unterstützung ist alles möglich!

Inhaltsverzeichnis

Vorwort

1Vue im Überblick

1.1Was ist ein JavaScript-Frontend-Framework?

1.2Historie und das Team rund um Vue

1.3Was ist Vue und was zeichnet es aus?

1.4Warum Vue?

1.5Unterschiede zu anderen Web-Frameworks

1.6Vue 2 oder Vue 3 lernen?

1.7Der Blick in die Zukunft

2Die Grundlagen: Ein Vue-Schnellstart

2.1Die erste Vue-Anwendung aufsetzen

2.1.1Die HTML-Struktur

2.1.2Einbinden von Vue als Skript

2.1.3Unsere erste Vue-Instanz

2.1.4Schleifen und Bedingungen

2.1.5Benutzereingaben verarbeiten

2.1.6Mit Komponenten kapseln

2.1.7Das deklarative Rendering und das virtuelle DOM

3Vue 3 im Überblick

3.1Warum neu schreiben?

3.2Ein mehrschrittiges Release

3.3Interne und externe Anpassungen

3.4Der neue Standard und Framework-Empfehlungen

4Vue-Projekte aufsetzen

4.1Scaffolding als Basis

4.2Vue-Projekte erstellen

4.2.1Das Vue CLI

4.2.2Die Auswahlmöglichkeiten

4.2.3Ein Projekt erzeugen und den Webserver starten

4.2.4Rapid (instant) Prototyping

4.3Vite als neuer Standard

4.4Die Entwicklungsumgebung vorbereiten

4.5Server-Side Rendering (SSR)

5Das (neue) Reactivity-System

5.1Der Ansatz von Vue

5.2Die Implementierung als Proxy in Vue 3

5.3Probleme bei der Reaktivität

6Komponenten im Detail

6.1Komponentenorientierte Entwicklung

6.2Komponenten und das Separation-of-Concerns-Prinzip

6.3Options API, Class-Style-Syntax und Composition API

6.3.1Options API

6.3.2Composition API

6.4Globale und lokale Komponenten

6.5Single-File Components (SFC)

6.6Lifecycle-Hooks

6.7Daten und Props

6.8Non-Prop-Attribute und Refs

6.9Methoden

6.10Benutzerdefinierte Events

6.11Der Datenfluss zwischen Komponenten

6.12Computed Propertys

6.13Watcher

6.14Eigene Komponenten mit v-model

6.15Standard, Named und Scoped Slots

6.16Dynamische Komponenten

6.17Eigene Direktiven und Plug-ins

6.18Fragmente, Portale und Suspense

6.19Asynchrone und funktionale Komponenten

6.20Dependency Injection mit Provide und Inject

6.21Render-Funktionen und JSX

6.22Vue Components und Web Components

6.23Wiederverwendbarkeit und Komponenten-Patterns

7Data Binding, Formulare und Styles

7.1Einführung ins Data Binding bei Vue

7.2Template-Syntax und das Binding von Attributen

7.3Bedingtes Rendering mit v-if und v-show

7.4Rendern von Listen mit v-for

7.5Die neue Arbeit mit Arrays

7.6Daten filtern, suchen und sortieren

7.7Daten auf Seiten aufteilen (Pagination)

7.8Formulare mit Daten verknüpfen

7.9Events von Anwenderinnen verarbeiten

7.10Formulare validieren

7.11Class- und Style-Binding

7.12Animationen und Transitionen

8Das Composition API

8.1Der Hintergrund

8.2Setup, Daten und Props

8.3Script Setup

8.4Methoden und Lifecycle-Hooks

8.5Computed Propertys und Watcher

8.6Composables (Composition Function)

8.7Vorgefertigte Kompositionen in Bibliotheken

8.8ref vs. reactive und Reactivity Transform

8.9Provide und Inject

8.10Render Functions und Templates Refs

8.11Eine komplette Komponente mit dem Composition API

8.12Das Reactivity API

8.13Composition API vs. Options API vs. Class API

8.14Das Composition API und Vue 2

9Routing mit dem Vue Router

9.1Was ist Routing und was der Vue Router?

9.2Installation und Bestandteile des Vue Router

9.3Routen konfigurieren

9.4Routen nutzen

9.5Dynamische Routen mit Parametern und Props

9.6Das Pattern-Matching

9.7Die verschiedenen History-Modi

9.8Verschachtelte Routen, Redirects und Lazy Loading

9.9Route-Guards und Metadaten

9.10CSS-Klassen, Transitionen und Composition API

9.11Fehler bei der Navigation erkennen

9.12Ein DIY-Router für Minimalistinnen und Minimalisten

10State Management mit Vuex und Pinia

10.1Was ist State Management und das Flux-Pattern

10.2Andere State-Management-Patterns

10.3Das neue Vuex und die Installation

10.4Die drei Kernprinzipien

10.5Die 4 + 1 Kernkonzepte

10.5.1Der Zustand (State)

10.5.2Zugriff auf den Zustand (Getter)

10.5.3Veränderungen des Zustands (Mutations)

10.5.4Aktionen durchführen (Actions)

10.5.5Einen Store aufteilen (Module)

10.6Einen Store in Komponenten nutzen

10.7Vuex und das Composition API

10.8Die Struktur einer Vuex-Anwendung und Plug-ins

10.9Einen Store debuggen

10.10State Management mit Pinia

10.11Vuex bzw. Pinia nutzen oder nicht?

11Mit Vue auf Ressourcen zugreifen

11.1Das Beispiel-API

11.2Zugriff auf ein API über das Fetch API

11.3Axios vs. Fetch

11.4Die Bibliothek Axios als Quasi-Standard

11.5Axios in Vue integrieren

11.6Daten abfragen und anzeigen

11.7Daten hinzufügen und löschen mit POST und DELETE

11.8Axios konfigurieren

11.9Pagination mit API-Aufrufen

11.10Mit Fehlern umgehen

11.11API-Zugriffe bündeln

11.12Axios mit Vue Router und Vuex

11.13Ein kurzer Blick auf Alternativen

12Anwendungsentwicklung mit Vue

12.1Ein Blick über den Tellerrand

12.2Das Tooling als Grundvoraussetzung

12.3Eine Vue-Projektstruktur

12.4Vue-Apps debuggen und Fehlerbehandlung

12.5Web-Apps auf Basis von UI-Frameworks

12.6Web-Apps auf Basis von Application Frameworks

12.7Mobile App-Entwicklung und statische Seiten

12.8Eine Web-App am Beispiel von Quasar

13Internationalisierung und Barrierefreiheit

13.1Installation und Konfiguration von Vue I18n

13.2Das aktive Gebietsschema abrufen und verändern

13.3Übersetzungen nutzen

13.4Vue I18n und das Composition API

13.5Asynchrones Laden von Übersetzungsdateien

13.6Routen und Router-Links übersetzen

13.7Vuex und Vue I18n

13.8Anwendungsentwicklung und das Ökosystem

13.9Etwas zur Barrierefreiheit

14Testen von Vue-Anwendungen

14.1Das Testen und Vue

14.2Vorbereitungen im Projekt

14.3Tests organisieren und strukturieren

14.4Unit-Tests für JavaScript und TypeScript

14.5Unit-Tests für Vue-Komponenten

14.6Unit-Tests für das Composition API

14.7Events testen

14.8Tests für Formulareingaben

14.9Tests für Vue Router

14.10Tests für Vuex

14.11Ende-zu-Ende-Tests

14.12Snapshot-Tests

14.13Tests der Internationalisierung

15Build und Deployment von Vue-Anwendungen

15.1Development- vs. Production-Build

15.2Den Build im Auge behalten

15.3Deployment auf Netlify und Heroku

15.4CI-/CD-Pipelines mit GitHub Actions und Azure DevOps

16Performante Vue-Apps entwickeln

16.1Vue 3 als allgemeiner Vorteil

16.2Performance von Komponenten prüfen

16.3Events und Reactivity

17Migration von Vue 2 auf Vue 3

17.1Die Wege einer Migration und der Migration-Build

17.2Breaking Changes

17.2.1Globales API

17.2.2Template-Direktiven

17.2.3Das Key-Attribut

17.2.4Komponenten

17.2.5Render-Funktionen

17.2.6Viele kleinere Änderungen

17.3Vue Router und Vuex

18Vue und TypeScript

18.1Vue (3) und TypeScript

18.2Ein neues Vue-Projekt mit TypeScript

18.3TypeScript im Vue-Projekt

18.4Die verschiedenen API-Modelle

18.4.1Options API

18.4.2Class-Style Vue Components

18.4.3Composition API

18.5Vue Router, Vuex und Internationalisierung

18.6Vor- und Nachteile bei Vue mit TypeScript

18.7Migration auf TypeScript

19Vue und das Backend

19.1Express (Node.js, JavaScript und TypeScript)

19.2Django (Python)

19.3Laravel (PHP)

19.4Spring Boot (Java)

19.5ASP.NET Core (.NET, C#, F# und Visual Basic)

19.6Firebase (Low Code)

19.7Serverless als Motto

19.8Low- und No-Code als Wachstumsmotor

20Etwas zu Bibliotheken

20.1Composition API

20.2Awesome Vue als umfassender Überblick

20.3Eine Bibliothek für Vue 2 und Vue 3 erstellen

Literaturverzeichnis

Index

Vorwort

Webanwendungen werden zunehmend umfangreicher, interaktiver und müssen mit immer größeren Datenmengen umgehen. Das erfordert bei der Konzeption und Implementierung von Webanwendungen ein Umdenken, insbesondere im Bereich der Frontend-Entwicklung. Dort wird verlangt, immer kompliziertere Funktionen hinzuzufügen und immer leistungsfähigere Werkzeuge zu verwenden – und das in immer kürzeren Release-Zyklen.

Web-Frameworks haben sich aus diesem Grund in den letzten Jahren sehr rasant weiterentwickelt. Sie erlauben es Entwicklern, auch komplexe und hochinteraktive Webanwendungen mit vertretbarem Aufwand umzusetzen. Sie bieten vorgefertigte Features an, können auch mit komplexen Zuständen und vielen Daten umgehen. Außerdem bieten sie zahlreiche weitere Features wie Komponenten, Routing und State Management an.

Vue.js hat sich neben Angular und React in kürzester Zeit zu einem populären Web-Framework entwickelt. Beim Schreiben dieses Buchs besitzt das Repository von Vue 2 auf GitHub über 190.000 Sterne und wird über den Paketmanager npm mehr als 2,5 Millionen Mal pro Woche heruntergeladen. Das Repository des Vue-3-Cores kommt bereits auf fast 30.000 Sterne. Mit der Version 3 des Web-Frameworks kamen viele seit Langem schon gewünschte Funktionen, Änderungen und Neuerungen hinzu, die das Framework zum einem weiter an andere Frameworks wie React heranrücken und andererseits die Vielseitigkeit von Vue erhöhen. Eine lohnende Version, um ein Projekt mit Vue zu starten oder darauf umzustellen.

Dieses Buch ist für alle gedacht, die sich in die Welt der Web-Frameworks aus Sicht von Vue einarbeiten möchten, um anschließend mit Vue kleine und große Anwendungen entwickeln zu können. Der Fokus liegt auf Vue in der aktuellen Version 3.x mit den Themenschwerpunkten auf allgemeine Framework-Funktionen sowie alles rund um Routing, State Management, Anwendungsentwicklung, Testen, Internationalisierung und Deployment von Vue-Anwendungen. Tipps und Tricks zu Migration von Vue-2-Projekten auf die neue Version sind ebenso enthalten, wie Deep Dives zu den umfangreichsten Änderungen von Vue 3, wie das neue Reactivity-System und Composition API.

Die Inhalte der kommenden Kapitel bauen auf JavaScript, HTML und CSS auf. Wo notwendig, werden Implementierung, Methoden und Vorgehensweise erklärt, zum Beispiel auch zu TypeScript und wichtigen Themen am Rande, wie Scaffolding. Dieses Buch ist auch für alle interessant, die Angular oder React kennen und sich über die Möglichkeiten von Vue informieren möchten.

Die Beispiele und Erläuterungen basieren auf Vue 3. Wo sinnvoll, wird auf die Änderungen zu Version 2 des Web-Frameworks verwiesen. Erstellt sind die Quelltexte und Beispielprojekte mit JavaScript; mit Semikolon hinter jeder Zeile und dem Options API. Wo notwendig, wird auf eine TypeScript-Implementierung verwiesen, da TypeScript im Webumfeld einen immer wichtigeren Platz einnimmt. Auch das Composition API, eine neue Möglichkeit von Vue 3, kommt nicht zu kurz. Alle Beispiele sind in einem Git-Repository auf GitHub verfügbar und nach Kapiteln organisiert: https://github.com/fdeitelhoff/vue-3-book. Zusätzlich existieren weitere Git-Repositorys, die als Grundlage für die Beispiele in StackBlitz dienen. Diese sind im genannten Repository verlinkt. Als Entwicklungsumgebung kommt Visual Studio Code zum Einsatz, ein kostenfreier Open-Source-Editor, der auf allen Plattformen zur Verfügung steht. Als Paketverwaltung ist die Wahl auf yarn gefallen und beim Module Bundler auf Webpack. Wenn möglich und sinnvoll, gibt es ein Live-Repository auf StackBlitz pro Kapitel für die Beispiele, um diese unkompliziert im Browser ausprobieren zu können.

Ein großes Dankeschön geht außerdem an die beiden Reviewer:

Vanessa Böhner(geborene Otto) arbeitet als Lead Frontend Developer bei Zavvy. Sie hat einen M.Sc. in Medieninformatik und fokussierte sich bei ihrem Studium auf die Mensch-Computer-Interaktion. Vanessa ist Moderatorin für die Podcasts Working Draft, expect(Exception) und Ausbaufähig. Bis 2021 war sie als Chapter Lead für die Region DACH der Front-end Foxes zuständig. Sie war Mitglied des JS-Kongress-Programmkomitees.

Antony Konstantinidisist seit über zwölf Jahren freiberuflich als Full-Stack-Entwickler, Consultant und Trainer tätig. Hauptsächlich befasst er sich mit der Frontend-Entwicklung und ist super glücklich mit der Entwicklung von und in Vue. Mit vuejs.de hat er letztes Jahr die erste deutsche Anlaufstelle für Vue gegründet.

1Vue im Überblick

Vue.js, englisch ausgesprochen [vju?], wie View, ist ein Framework zur Implementierung von Webanwendungen. Nicht selten wird Vue.js als Bibliothek bezeichnet, weil es sich durch den progressiven Ansatz, der in diesem Kapitel erläutert wird, gut in eigene Projekte jeglicher Größe und Komplexität eingliedert. Der Hauptunterschied zwischen einem Framework und einer Bibliothek ist, dass sich unser Code den Standards und Vorgaben eines Frameworks anpassen muss, während sich eine Bibliothek unseren Standards und Vorgaben anpasst. Da sich Vue.js bereits durch minimale Veränderungen im Projekt integrieren lässt, schwankt die Definition zwischen Framework und Bibliothek. Dieses Buch folgt der Kategorisierung als Framework, da es bei einem konsequenten Einsatz die Architektur der Webanwendung vorgibt – ein unverwechselbares Merkmal eines Frameworks. Im weiteren Verlauf wird Vue.js, je nach Version auch Vue.js 2 oder Vue.js 3 genannt, als Vue bezeichnet. Das js als Abkürzung für JavaScript ist im Sprachgebrauch nicht notwendig.

1.1Was ist ein JavaScript-Frontend-Framework?

Bis in die frühen 2000er-Jahre hinein waren komplexe Webanwendungen im Browser undenkbar. Sowohl von der Performance her als auch vom notwendigen Tooling war an eine Entwicklung von Webanwendungen nicht zu denken. JavaScript war hauptsächlich im Einsatz, um kleinere Funktionalitäten auf Webseiten zu realisieren; weit entfernt vom heutigen Anwendungsfeld und den Möglichkeiten.

Geändert hat sich das mit der Einführung von Google Maps und Gmail im Jahr 2005 in den USA und ab 2006 auch als Webdienst in Deutschland. Zwei Anwendungen, die schon damals bei ihrer Einführung problemlos im Browser liefen – angetrieben durch asynchrone Ajax-Requests, die Anfragen über das Netzwerk möglich machten. Diese Möglichkeiten wurden in den folgenden Jahren konsequent ausgebaut. Browser haben neue Funktionen bekommen, ebenso wie neue und angepasste APIs. Zudem wurde JavaScript als Sprache und Webstandard grundlegend überarbeitet und zum Teil fast neu geschaffen. AngularJS, Ember, Knockout und Backbone.js gehörten zur ersten Welle an neuartigen und modernen Web-Frameworks, um diese rasante Entwicklung von Webanwendungen zu unterstützen. Diese Geburtsstunde von Web-Frameworks hat dazu geführt, dass immer mehr Interaktionen mit dem Browser und dem Document Object Model (DOM) einer Webseite abstrahiert wurden. Das hatte neue Funktionen, bessere Performance und eine verkürzte Entwicklungszeit zur Folge.

Ein Frontend-Framework ist ein Gerüst für das Erstellen eines Frontend. Mit an Bord sind normalerweise Möglichkeiten, Dateien zu strukturieren, zum Beispiel um Komponenten und Daten mit DOM-Elementen zu verknüpfen. Ein Frontend-Framework hilft zudem bei der Trennung der Belange (Separation of Concerns), indem es sich ausschließlich um die Anzeige kümmert und Anfragen bezüglich Daten an ein Backend weiterleitet. Solche Frameworks bieten viele Vorteile, wie bessere Wartbarkeit, saubere Trennung der Belange, höhere Geschwindigkeit, eine gute Zusammenarbeit zwischen Entwicklern und eine breite Community. Es gibt aber auch Nachteile, wie die Einführung einer weiteren Abstraktionsschicht und die damit einhergehende erhöhte Komplexität, eine Lernkurve, die (zu) schnelle Evolution des Ökosystems, die Notwendigkeit, ein Projekt spezifisch nach den Wünschen des Frameworks aufzusetzen, und einen Overkill für kleinere Projekte.

Ein JavaScript-Web-Framework erlaubt es somit, moderne Anwendungen mit modernen Tools zu erschaffen, mittlerweile nicht mehr nur fürs Web im Browser, sondern ebenfalls auf dem Desktop und als mobile Anwendungen auf Smartphones. Wer sich bisher noch nicht sicher war, was ein JavaScript-Front-end-Framework oder Web-Framework bedeutet, hat jetzt hoffentlich einen ersten Einblick bekommen. Zudem ist Vue als Einstieg in die große Welt der Webentwicklung genau richtig.

1.2Historie und das Team rund um Vue

Vue wurde von Evan You erschaffen, der bei Google mit AngularJS an einer Reihe von Projekten gearbeitet hat. In einem Interview sagte er mal, dass er das Beste an AngularJS herauslösen und als leichtgewichtiges Projekt anbieten wollte. Genau das hat er getan. Im Juli 2013 fanden die ersten Commits im Projekt statt. Eine erste öffentliche Version 0.6 erschien im Dezember des gleichen Jahres.

Seitdem ist die Beliebtheit von Vue konstant gewachsen, bis zur Version 3.0, die im September 2020 erschien. Im Jahr 2016 waren es circa 7.500 Sterne, im Jahr 2017 bereits über 36.000. Zudem zählte das Vue-Repository als das populärste Repository im Jahr 2016 (Stars, 2016). Das GitHub-Repository für Vue 2 (Team V., GitHub Repository für Vue 2, 2022) mit dem Quelltext des Vue-Projekts zählt mittlerweile über 190.000 Sterne und über 31.000 Forks (beides Stand Februar 2022). Da Vue 3 neuorganisiert wurde, gibt es dazu ein eigenes Repository (Vue, 2022). Das ist eine beachtliche Steigerung. Denn auch wenn Sterne auf GitHub keine verlässliche Metrik für die Beliebtheit sind, sind sie zumindest ein Indikator. Eine aktuelle Auswertung in der Umfrage The State of JS 2021 kommt zu dem Ergebnis, dass die Beliebtheit und Zufriedenheit etwas abgenommen hat (80%), aber immer noch auf einem hohen Wert verbleibt. Das Interesse und die Nutzung verbleiben bei einem nahezu unveränderten Wert (circa 50%) (State of JS Team, 2022).

Mittlerweile ist nicht mehr nur Evan You mit der Entwicklung von Vue beschäftigt. Eine ganze Reihe von Personen auf der ganzen Welt arbeitet gemeinsam am Projekt und den zahlreichen offiziellen Erweiterungen.

1.3Was ist Vue und was zeichnet es aus?

Das Ziel von Vue (Team V., Vue.js – The Progressive JavaScript Framework, 2022) ist es, die Vorteile reaktiver Datenbindung (Reactive Data Binding) und kombinierbarer Komponenten (Composable Components) mit einer einfach zu nutzenden Schnittstelle zu verknüpfen und zur Verfügung zu stellen.

Diese einfache API und die damit verbundene niedrige Hürde für den Einstieg sind ein Merkmal, das Vue auszeichnet und von vielen anderen Web-Frameworks und -Bibliotheken abhebt. Denn andere Frameworks und Bibliotheken gehen oft den Weg, eine Schnittstelle anzubieten, die so umfassend wie möglich ist. Ein weiteres Merkmal ist, dass Vue nicht als das alles umfassende Web-Framework gedacht ist. Vue nutzt das Model-View-ViewModel-(MVVM-) Entwurfsmuster und fokussiert sich auf den View-Layer und nur auf diese Schicht – ein weiterer Punkt, warum Vue als einfach zu adaptieren gilt, wenn es um den Einsatz im eigenen Projekt geht. Diese Designentscheidungen führen zudem dazu, dass sich Integration und Kombination mit anderen Bibliotheken einfach umsetzen lassen. Vue sperrt sich dabei selten, und die Community hat eine umfassende Palette an guten Erweiterungen geschaffen, die gerne als First-Party-Erweiterungen bezeichnet werden.

Diese Merkmale bedeuten aber nicht, dass wir mit Vue keine umfangreichen oder anspruchsvollen Webprojekte stemmen können. Mit Vue lassen sich sehr wohl hochkomplexe Single Page Applications (SPAs) erzeugen, was die zahlreichen kurz vorgestellten Use Cases gegen Ende dieses Buchs beweisen.

1.4Warum Vue?

Da mittlerweile zahlreiche Web-Frameworks existieren, steht immer die Frage im Raum, warum dieses oder jenes Framework für das eigene Projekt zum Einsatz kommen soll. In diesem Fall also die simple Frage: Warum Vue?

Das läuft auf die Frage hinaus, was Vue für einen konkreten Mehrwert bietet. Hier kommt der progressive Ansatz von Vue zum Tragen. Die Macher von Vue bezeichnen es als progressives Framework, weil Vue es erlaubt, mit minimalem Aufwand eine Anwendung mit Vue zu starten oder eine bereits bestehende mit einer ersten Vue-Komponente auszustatten. Dazu ist es nicht notwendig, die gesamte Architektur des Projekts von Grund auf neu zu entwickeln, damit es den Anforderungen von Vue gerecht wird. Die minimal notwendigen Schritte sind, Vue einzubinden, im einfachsten Fall als loses Skript, um dann eine Seite mit einer View-Komponenten auszustatten. Diese Änderungen als Grundlage genutzt, lassen sich weitere Komponenten einsetzen, Komponenten miteinander kombinieren und dergleichen. Wenn mit der Zeit die Anforderungen wachsen, lassen sich weitere Komponenten einbeziehen, zum Beispiel für das Routing oder das State Management.

Diese Möglichkeit, Vue in einem Projekt nach und nach einzusetzen, ist unter Entwicklerinnen und Entwicklern ein häufiger Grund, warum die Wahl auf Vue fällt. Insbesondere beim Einsatz des ersten Web-Frameworks ist diese iterative Adaption von Features ein großer Vorteil. Vue passt sich den Fähigkeiten der Entwicklerin oder des Entwicklers an und nicht andersherum. Das wirkt aktiv gegen den Trend vieler Frameworks und Bibliotheken, Neuankömmlinge abzuschrecken, weil sich das gesamte Projekt nach den Vorgaben des Web-Frameworks richten muss, was dazu führen kann, dass sich Einsteiger am Anfang komplett verloren fühlen. Vue wird daher manchmal als das neue jQuery bezeichnet, weil es ebenso einfach einsetzbar ist wie die einstige Vorzeigebibliothek für dynamische Webseiten.

Vue besitzt einige weitere Vorteile. Es ist klein, was die Downloadgröße anbelangt, besitzt das Prinzip der Single-File Components und damit eine gute Lesbarkeit, ein solides Tooling- und Ökosystem und gilt im Allgemeinen als einfach zu nutzen. Aber natürlich ist nicht alles eitel Sonnenschein. Mit Vue 3 wurde das Reactivity-System verbessert, es ist aber immer noch recht komplex. Außerdem besteht die Gefahr der Über-Flexibilisierung. Wenn Vue ohne große Hürden überall zum Einsatz kommen kann, kann es zu nicht gut wartbarem Code kommen. Hier ist etwas Disziplin gefordert.

1.5Unterschiede zu anderen Web-Frameworks

Über die Jahre hat sich eine ganze Reihe von Web-Frameworks etabliert. Allen voran sind sicherlich Angular und React zu nennen, die eine umfassende Community und eine Vielzahl prominenter Webprojekte hinter sich vereinen. Vue muss sich allerdings nicht mehr hinter diesen Projekten verstecken. Insbesondere mit Vue 3 sind erhebliche Änderungen in das Projekt eingeflossen, sodass sich die drei großen Web-Frameworks Angular, React und Vue weiter annähern.

Beim Vergleich zwischen Angular und Vue stechen einige Punkte heraus. Das mögen von Projekt zu Projekt Gründe sein, um Vue einem Einsatz von Angular vorzuziehen. In der Regel ist der Einsatz eines Web-Frameworks von Fall zu Fall zu entscheiden. Vue ist beispielsweise deutlich einfacher zu nutzen als Angular, was primär am API-Design liegt. Der Einstieg in Vue gelingt häufiger einfacher und schneller. Zudem ist Vue in vielen Fällen flexibler und bringt eine weniger starke eigene Meinung mit, wie ein Projekt zu strukturieren ist. Vue ist primär eine Schnittstellenschicht (Interface Layer), sodass sich auf Webseiten einige Features von Vue nutzen lassen, ohne direkt alles umbauen und umstrukturieren zu müssen. Ein großer Unterschied zu Angular ist noch, das Vue im Kern praktisch keine zusätzlichen Features mitbringt, zum Beispiel kein Routing. Der Ansatz von Vue ist die Annahme, dass in einem Web-Framework sowieso ein Bundler wie Webpack für externe Module zum Einsatz kommt. Ein weiterer Unterschied zwischen Angular und Vue ist, dass Vue im Standard auf ein One-Way-Data-Binding zwischen Eltern- und Kindkomponente setzt, wohingegen Angular Two-Way anbietet. Vue trennt zudem ganz klar zwischen Direktive sowie Komponente und hat vielfach die bessere Performance. Ein Grund dafür ist das transparente Tracking von Abhängigkeiten auf Basis eines asynchronen Queuing-Verfahrens. Alle Änderungen werden unabhängig voneinander getriggert, außer sie haben eine explizite Abhängigkeitsbeziehung. Viele dieser Probleme und Unterschiede wurden in vergangenen und werden in zukünftigen Versionen von Angular angepackt, sodass diese Unterschiede von Version zu Version kleiner werden.

React und Vue teilen sich viele Gemeinsamkeiten, da beide Web-Frameworks reaktive und kombinierbare Komponenten für den View-Layer anbieten. React nutzt für Änderungen das Virtual DOM, ein vormals großer Unterschied zu Vue. Mittlerweile implementiert Vue ebenfalls ein virtuelles DOM, eine Light-Version des realen DOM. Hier haben sich React und Vue deutlich angenähert. Aus Sicht des API wird es häufig kritisch gesehen, dass die Render-Funktionen in React viel Logik enthalten und somit nach und nach eher einem Programm gleichen, was sie letztendlich auch sind, anstatt sich nur um die visuelle Repräsentation zu kümmern. Das mag für Entwickler noch verträglich sein, für Designer kann es die Arbeit mit diesen Templates erschweren. Das React-Team verfolgt zudem das ambitionierte Ziel, React zu einem plattformunabhängigen UI-Entwicklungsparadigma zu entwickeln. Vue konzentriert sich im Gegensatz dazu darauf, eine einfache pragmatische Lösung für das Web zu bieten. React arbeitet zudem gut mit funktionalen Mustern (Patterns) zusammen, was gerade zu Beginn zu einer etwas steileren Lernkurve und mehr Hürden führen kann. Sind diese funktionalen Muster aber bekannt, kann React seine ganze Stärke ausspielen. Vue gilt als gemeinhin einfacher für den Einstieg. Mit Vue 3 und dem Composition API, ebenfalls Thema in diesem Buch, geht aber auch das neue Vue einen deutlich funktionaleren – aber optionalen – Weg. Ein großer Vorteil von React ist das ausgezeichnete State Management. Mit Flux/Redux ((Facebook, 2022) und (Abramov, Redux, 2022)) werden Möglichkeiten angeboten, die lange Zeit allen anderen Frameworks voraus waren. Vue setzt hier, getreu dem Designprinzip des Web-Frameworks, auf externe Bibliotheken wie Vuex, und auch Redux lässt sich mit Vue kombinieren. Als letztes Merkmal ist der Trend bei React zu nennen, alles in JavaScript einzubetten, auch die CSS-Anweisungen. Vue löst das mit dem Feature der Single-File Components, in denen das CSS pro Komponente gekapselt ist, aber als reines CSS bereitsteht. Dadurch können zum Beispiel weiterhin Präprozessoren für CSS zum Einsatz kommen.

Vue grenzt sich auch von Frameworks wie Ember, Polymer und Riot in vielen Aspekten ab. In Ember ist die Reaktivität beispielsweise nur über eigene Ember-Objekte herzustellen, zudem ist die Template-Syntax von Vue einfacher zu nutzen, da sich JavaScript-Anweisungen integrieren lassen. Zudem ist Vue noch immer ein ganzes Stückchen performanter. Bei Polymer ist zum Beispiel ein Nachteil, dass das Framework auf dem aktuellen Feature der Web Components fußt. Für Browser, die das nicht unterstützen, sind umfangreiche und nicht-triviale Polyfills notwendig. Im Vergleich zu Riot gibt es eine ganze Reihe von Unterschieden. Riot rendert zum Beispiel alle if-Verzweigungen immer und blendet je nach Bedingung dann lediglich die nicht benötigten aus. Dadurch entstehen Performance-Bottlenecks. Zudem sind das Tooling und die externen Module, wie das Routing, in Vue deutlich fortschrittlicher und mächtiger.

Dieser Überblick kann nur ein Ausschnitt aus der Welt der Web-Frameworks darstellen, da sich das Web und die Technologien darin beständig weiterentwickeln. Für einen vollständigen Überblick gibt es zu viele Frameworks und Bibliotheken, und die Geschwindigkeit, mit der Änderungen eingebracht werden, ist schwindelerregend.

1.6Vue 2 oder Vue 3 lernen?

Wer gerade anfängt, Vue kennenzulernen, sollte direkt mit der Version 3 starten. Das ist diejenige, die in Zukunft weiterentwickelt wird und die neuen Konzepte inklusive vieler Verbesserungen nutzt. Zudem sind zahlreiche Funktionalitäten optional, lassen sich also gut graduell einsetzen.

In der Praxis ist die Entscheidung aber gar nicht so leicht. Es hängt zum Beispiel davon ab, ob in einem Team gearbeitet wird, das Vue 2 verwendet und keine Pläne für eine Migration auf Vue 3 hat. Es hängt auch vom eigenen Zeitplan ab und ob die eigene App Abhängigkeiten benötigt, die noch nicht mit Vue 3 kompatibel sind. Das wird sich zwar über die Zeit aller Voraussicht nach lösen, aber in solchen Situationen ergibt es vielleicht keinen Sinn, die neueste Syntax und APIs von Vue 3 zu lernen, wenn diese nicht in der täglichen Arbeit zum Einsatz kommen können. Bis auf Mixins kann Vue 3 so eingesetzt werden, wie es von Vue 2 bekannt ist. Es gibt daher keinen triftigen Grund, noch mit Vue 2 zu starten, wenn die in Vue 3 fehlenden Mixins kein Argument sind.

Der Einstieg mit Vue 3 ist also keine schlechte Idee und zukunftssicher. So ist sichergestellt, dass wir nicht in Kürze abgehängt sind, weil Vue 2 dann doch schneller ausläuft als angenommen.

1.7Der Blick in die Zukunft

Auch wenn die Veröffentlichung von Vue 3 und der Wechsel zur Version 3 als offizielle Version im Februar 2022 zwei Events zum Feiern im Vueniverse waren, so blieb die Entwicklung danach natürlich nicht einfach stehen. In Zukunft sind weitere neue Features geplant.

Dazu gehört Reactivity Transform, der finale Baustein für das Reactivity-System und das Script Setup. Damit wird es deutlich einfacher, reaktive Daten zu erstellen, und es verkleinert die Einstiegshürde für alle, die von Vue 2 kommen.

Auch im Ökosystem sind noch einige Änderungen zu erwarten. Zum Beispiel die stabile Version von Nuxt 3 mit zahlreichen Änderungen im Gepäck. So ähnlich sieht es bei Vuetify aus, einem populären Framework basierend auf dem Material Design. Das Team rund um Vuetify arbeitet aktuell an der finalen Unterstützung von Vue 3.

2Die Grundlagen: Ein Vue-Schnellstart

Trotz der zahlreichen Anpassungen, die Vue über die Jahre erfahren hat, ist dem Web-Framework der progressive Charakter nicht abhandengekommen. Ganz im Gegenteil wurde dieses primäre Designmerkmal weiter gepflegt. Das wird sichtbar, wenn es darum geht, eine erste minimale Vue-Anwendung zu erstellen: ohne großes Aufsehen und ohne großen Aufwand.

Vue besitzt einige Kernfunktionen, mit denen der generelle Funktionsumfang des Web-Frameworks gerne beschrieben wird. Die Vue-Instanz ist eine davon. Jede Anwendung besitzt mindestens eine dieser Instanzen. Grundsätzlich sind aber beliebig viele Vue-Instanzen pro HTML-Datei erlaubt.

Eine weitere Kernfunktion sind Komponenten. Vue-Instanzen lassen sich durch Komponenten erweitern, die sich zudem verschachteln lassen. Eine Komponente enthält das Template, bestehend aus HTML-Elementen, um eine Webseite oder einen Teil davon zu definieren. Komponenten können im Projekt hervorragend wiederverwendet werden. Mit dem neuen Composition API (siehe Kapitel 8) von Vue 3 sogar noch deutlich besser als das bisher der Fall war.

Des Weiteren nutzt Vue eine deklarative auf HTML basierende Template-Syntax, um das DOM an die Daten einer Vue-Instanz zu binden. Zum Beispiel lassen sich dadurch Daten mit geschweiften Klammern an eine Variable binden, die dann in der View ausgegeben werden.

Das Binding und die Direktiven werden ebenso häufig im Zusammenhang mit Vue genannt. Sowohl Attribute als auch Methoden oder Variablen können mit wenig Aufwand gebunden werden, sodass sich Datenänderungen oder Benutzerinteraktionen direkt auf das zugrunde liegende Modell auswirken. Direktiven sorgen dafür, dass zum Beispiel das Rendern von HTML-Elementen an Bedingungen geknüpft werden kann.

2.1Die erste Vue-Anwendung aufsetzen

Eine erste Vue-Anwendung aufzusetzen, ist nicht viel Aufwand. In diesem Abschnitt liegt der Fokus auf den Grundlagen, mit denen Vue schnell im eigenen Projekt integriert ist: ohne das vollständige Tooling rundherum zu nutzen. Wie neue Vue-Projekte aufgesetzt werden, ist Inhalt von Kapitel 4. Die nachfolgenden Beispiele zeigen, wie Vue als einfaches Skript einzubinden ist, um die Vue-Application-Instanz zu nutzen, sowie HTML und die darin enthaltenen Daten anzuzeigen. Jede Vue-Anwendung beginnt damit, so eine Instanz zu erzeugen. Genau genommen ist diese Application Instance eine Komponente, die als Wurzel-Komponente die Anwendung definiert. Das macht deutlich, wie wenig Overhead Vue verursacht, wenn wir Vue lediglich als Skript einbinden, ohne einen Build-Prozess vorauszusetzen. Zudem zeigt es, dass alles auf Komponenten basiert.

2.1.1 Die HTML-Struktur

Zunächst ist ein HTML-Dokument notwendig. Dazu reicht ein Standard-HTML5-Dokument völlig aus. Das verdeutlicht, dass Vue praktisch keine Anforderungen an die HTML-Elemente und die HTML-Struktur stellt. Ein Head, ein Body, und los geht es.

<!DOCTYPE html>

<html lang="de">

<head>

<meta charset="utf-8" />

<title>Vue-Grundlagen</title>

<meta name="description" content="Das Vue-3-Buch" />

<meta name="author" content="Dr. Fabian Deitelhoff" />

</head>

<body>

<p>Ein wenig Inhalt als einfacher Test...</p>

</body>

</html>

Um Vue in diesem Beispiel zum Laufen zu bekommen, ist das Einbinden von Vue als Skript und ein Skript-Element zum Erzeugen unserer ersten App notwendig. Außerdem benötigen wir ein HTML-Element zum Andocken (mounten) unserer Vue-App. Diese Schritte zeigen die nachfolgenden Abschnitte in diesem Kapitel.

2.1.2 Einbinden von Vue als Skript

Für unseren einfachen Anwendungsfall gibt es zwei Möglichkeiten, Vue einzubinden: entweder als lokales Skript, das zuvor von der Vue-Webseite heruntergeladen wurde, oder direkt über ein Content Delivery Network (CDN). In diesem Beispiel kommt die zweite Variante zum Einsatz. Das nachfolgende Beispiel zeigt, wie das HTML-Dokument im Body um ein paar Anweisungen erweitert werden muss, damit Vue als Skript eingebunden ist. Zudem kamen das HTML-Element zum Mounten der Anwendung und das Skript-Element zum Implementieren des kleinen Beispiels hinzu.

Der Standardweg zu Vue

In komplexeren Projekten wird in der Regel eine Paketverwaltung wie npm oder yarn genutzt oder eine Projektstruktur automatisch über die Kommandozeile erzeugt. Es gibt unterschiedliche Skripte und Pakete, zum Beispiel für das Server-Side-Rendering, ohne Bundler, ohne Compiler und dergleichen. Wie eine Projektstruktur für Vue erzeugt wird, zeigt Kapitel 4. Das ist der etablierte Standardweg außerhalb von kleinen Test- oder Beispielanwendungen wie unser Beispiel hier. Bei Projekten zur Entwicklung umfangreicher Anwendungen werden zudem gerne Tools wie Vite, Vuetify oder Quasar genutzt. Damit lassen sich Anwendungen komfortabel und schnell entwickeln. Zu diesen Themen, mit einem Fokus auf Quasar, verrät das Kapitel 12 weitere Informationen.

<body>

<p>Ein wenig Inhalt als einfacher Test...</p>

<!-- HTML-Element (div) zum Mounten der App. -->

<div id="first-app"></div>

<!-- Die Referenz auf die Vue-Bibliothek. -->

<script src="https://unpkg.com/vue@3"></script>

<!-- Das Script-Element für die erste Vue-App. -->

<script></script>

</body>

Für diese Demo ist es ausreichend, das Skript von /vue@3 einzubinden. Dass es sich hierbei um eine Vue-Version für die Entwicklung handelt, meldet auch prompt die Konsole, wenn die entsprechende HTML-Datei im Browser angezeigt wird:

You are running a development build of Vue.

Make sure to use the production build (*.prod.js) when deploying for production.

Das ist eine wichtige Information. Zudem ist es ratsam, im produktiven Einsatz beim Einbinden auf eine spezifische Version zu verweisen. Das verhindert unerwartete Probleme, wenn sich Implementierungen zwischen den verschiedenen Versionen ändern.

Unser Beispiel nutzt den globalen Build von Vue, in dem alle APIs unter dem globalen Vue-Variablen verfügbar sind. Wer etwas mehr Konsistenz zu der ES-Modul-Syntax möchte, kann Vue auch als Modul im Browser einbinden:

<script type="importmap">

{

"imports": {

"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"

}

}

</script>

Anschließend stehen die bekannten Imports zur Verfügung; als wäre ein Build-Prozess mit Build-Tools im Einsatz. Diese Art, Vue einzubinden, ist in der Regel nur für Demozwecke gut geeignet. Später ergeben Build-Tools und ein umfassenderes Projekt-Setup mehr Sinn.

2.1.3 Unsere erste Vue-Instanz

Für unsere erste Vue-Instanz binden wir zunächst ein kleines Fragment in das HTML-div-Element ein, das zum Mounten der Anwendung dient. Dieses sieht dann wie folgt aus:

<!-- HTML-Element (div) zum Mounten der App. -->

<div id="first-app">

<p>{{ info }}</p>

</div>

Vue nutzt, wie viele andere Web-Frameworks auch, eine auf HTML-basierende Template-Syntax. Elemente des daraus erzeugten Document Object Model (DOM) werden an die darunterliegende Vue-Instanz gebunden.

Im einfachsten Fall kann eine Interpolation dazu genutzt werden, um Daten im HTML-Dokument anzuzeigen. Vue nutzt dazu, ebenfalls wie viele andere Bibliotheken und Frameworks auch, die sogenannte Mustache-Syntax (Team M., 2022) mit zwei öffnenden und schließenden, geschweiften Klammern. In dieser Demo {{ info }}. Ohne eine aktive Vue-Instanz wird dieses Fragment als normales HTML interpretiert, und der Browser zeigt es einfach an. Denn bei allen Vue-Templates handelt es sich um valides HTML, das vom Browser verarbeitet und interpretiert werden kann. Die Dynamik kommt erst durch die Vue-Instanz ins Spiel.

Das Skript-Tag, das zuvor als Vorbereitung für die Vue-Instanz in das HTML-Dokument eingebaut wurde, wird nun wie folgt angepasst:

Options API in diesen Beispielen

Dieses und die nachfolgenden Beispiele nutzen das Options API (siehe Abschnitt 6.3.1) von Vue 3. Von der data-Eigenschaft wird erwartet, dass diese als Funktion implementiert ist und ein reines JavaScript-Objekt zurückgibt. Wir können an dieser Stelle eine Pfeil-Funktion (Arrow Function) nutzen, allerdings ist this dann nicht mehr die Instanz der Komponente. Zugriff auf diese bekommen wir dann über den ersten Parameter der Funktion.

Mit diesem Codefragment wird ein simples JavaScript-Objekt mit dem Namen FirstVueApp erzeugt. Dieses Objekt wird anschließend an die createApp-Methode übergeben. Das ist das sogenannte Bootstrapping einer Vue-App. Das JavaScript-Objekt FirstVueApp wird als Vue-Instanz-Definition angesehen und zurückgeliefert. Das Resultat des Aufrufs kann dann über das Fluent Interface mit der mount-Methode über einen CSS-Selektor an ein HTML-Element angehängt werden. In diesem Beispiel wird das Element mit der ID #first-app genutzt. Das Objekt, das wir an createApp weiterreichen, ist in Wahrheit bereits unsere erste Komponente und auch gleichzeitig die Wurzel-Komponente.

In Vue 3 gibt es keine einzelne globale Instanz mehr. Ein wesentlicher Grund für diese Änderung ist, dass dadurch nicht mehr das globale Vue-Objekt verändert wird, zum Beispiel wenn Plug-ins oder Mixing von Drittanbietern an diese globale Instanz gebunden werden. Das ist insbesondere beim automatisierten Testen ein Problem, wenn die globale Instanz über mehrere Tests hinweg existiert. Dann ist nicht sichergestellt, dass jeder Test die gleichen Voraussetzungen nutzt, nämlich eine unveränderte Vue-Instanz. Auch das Einbinden eines Routers (siehe Kapitel 9) und Vuex (siehe Kapitel 10) geschieht nun als einfaches Plug-in. Das erhöht die Transparenz deutlich. Dieses Global Mounting, wie der Prozess genannt wird, hat sich von Vue 2 zu 3 deutlich geändert. Unsere erste Vue-App ist damit bereits erstellt.

2.1.4Schleifen und Bedingungen

Das Beispiel mit der ersten Vue-Instanz hat gezeigt, dass sich Vue mit wenig Aufwand in ein HTML-Dokument integrieren lässt; inklusive Data Binding von Variablen aus dem Datenobjekt im HTML-Template. Dadurch eröffnen sich sofort weitreichende Möglichkeiten: zum Beispiel durch Schleifen und Bedingungen. Denn ein Datenobjekt einer Vue-Instanz kann nicht nur einfache Daten wie Zeichenketten und numerische Werte enthalten, sondern auch Arrays und weitere komplexe Objekte.

Die folgende Liste von Elementen enthält vier JavaScript-Objekte mit zwei Attributen und Beispieldaten, die im Datenobjekt der Vue-Instanz hinterlegt sind, direkt unter dem info-Attribut.

events: [

{ id: 1, name: 'Veranstaltung 1', participantCount: 7 },

{ id: 2, name: 'Veranstaltung 2', participantCount: 9 },

{ id: 3, name: 'Veranstaltung 3', participantCount: 13 },

{ id: 4, name: 'Veranstaltung 4', participantCount: 22 },

],

Das Beispiel zeigt die Dateneigenschaft events und die enthaltenen Objekte. In diesem Fall einfache JavaScript-Objekte mit zwei Eigenschaften. Diese Liste mit JavaScript-Objekten kann zum Beispiel im HTML-Template durchlaufen und die enthaltenden Daten anzeigen. Das dafür notwendige HTML-Markup ist überschaubar und beinahe selbsterklärend. Die notwendigen Merkmale und Funktionen von Vue sind schnell beschrieben. Die folgenden HTML-Deklarationen sind im Dokument neu hinzugekommen, um die Informationen im Array darzustellen.

<div v-for="event in events">

<p>

ID: {{ event.id }}

<br />

Name: {{ event.name }}

<br />

Anzahl Teilnehmende: {{ event.participantCount }}

</p>

</div>

Dieses HTML-Snippet realisiert die Ausgabe aller Demo-Events in der Eigenschaft events unserer Vue-Instanz. Eine Schleife ist in Vue mit der Direktive v-for realisiert. Bei der Syntax sind ein Array als Quelle und ein Alias für das aktuelle Element eines Schleifendurchlaufs gefordert. In diesem Fall ist events das Quell-Array und event der Alias für das aktuelle Element. Beim Schleifendurchlauf wird das HTML-Element mit der Direktive v-for pro Element im Array dupliziert. Im Beispiel gibt es daher vier div-Element mit jeweils einem p-Element. Bei einer HTML-Liste müsste das v-for daher beim li-Element platziert werden, damit es der Array-Größe entsprechend viele Listenelemente gibt:

<li v-for="event in events">

{{ event.name }}

</li>

Beide Beispiele zeigen auch, dass auf die Eigenschaften eines Objekts innerhalb der Schleife zugegriffen werden kann. Hier kommt die Punktnotation zum Einsatz, die aus vielen objektorientierten Programmiersprachen bekannt ist. Um die Werte auszugeben, ist in diesem Beispiel erneut die Textinterpolation ausreichend, weil die Beispieldaten sehr überschaubar sind. Neben der gezeigten Variante der v-for-Direktive gibt es noch weitere Möglichkeiten. Mit der Syntax (event, index) in events steht pro Schleifendurchlauf nicht nur das aktuelle Element der Liste, sondern auch der aktuelle Index zur Verfügung.

Zusätzlich ist es möglich, in der Schleife auf den übergeordneten Scope zuzugreifen. Zum Beispiel steht die Variable {{ info }} auch in der Schleife zur Verfügung, da sie im Datenobjekte unserer Vue-Instanz deklariert wurde.

Beim Einsatz von Listen ist es nicht unüblich, dass Elemente aktualisiert werden und sich daher die Liste anpassen muss; zum Beispiel, wenn sich die Reihenfolge ändert. Anstatt die vorhandenen DOM-Elemente in der Gegend zu verschieben, nutzt Vue einen Mechanismus namens In-Place Patch. Jedes Element wird automatisch angepasst (gepatcht), um die neue Reihenfolge der Liste darzustellen. Das funktioniert in einfachen Fällen sehr gut. Kommt aber ein Status hinzu, zum Beispiel von Kind-Komponenten, wird es schwierig. Um dieses Problem zu beheben, ist die dringende Empfehlung, bei einer Liste ein Key-Element mit anzugeben. Auf diese Weise ist Vue in der Lage, die Identität jedes Knotens in der Liste zu tracken. Die Syntax für so ein Key-Element sieht wie folgt aus.

<div v-for="event in events" :key="event.id">

Was es mit dem Doppelpunkt auf sich hat, wird in späteren Beispielen deutlich. Es handelt sich dabei, kurz gesagt, um eine Form des Binding. In unserem Beispiel wird die Eigenschaft ID der Objekte im Array genutzt. Ein Schlüssel muss eindeutig sein, damit sich die Elemente in der Schleife auch eindeutig identifizieren lassen. Die Eigenschaft Name würde prinzipiell auch funktioniert, allerdings auch nur in diesem Beispiel wirklich gut, weil die Namen in den Testdaten tatsächlich eindeutig sind. In der Realität ist das schnell nicht mehr der Fall.

Bedingungen funktionieren ähnlich. Sie basieren ebenfalls auf Direktiven, die an ein HTML-Element angeheftet werden. Zu einer Bedingung gehört ein Ausdruck, der true ergeben muss, wenn das durch die Direktive annotierte HTML-Element gerendert werden soll. Das zuvor gezeigte Beispiel mit dem Schleifendurchlauf lässt sich wie folgt erweitern, um eine Nachricht anzuzeigen, wenn keine Elemente in der Liste vorhanden sind.

<div v-if="events.length > 0">

<div v-for="event in events" :key="event.id">

<!-- ... -->

</div>

</div>

<p v-else>

Keine Veranstaltungen vorhanden. Du kannst welche hinzufügen...

</p>

Im Ausdruck von v-if lassen sich auf Eigenschaften von Objekten oder Ähnliches zugreifen. So ist es möglich, die Länge des Arrays zu prüfen. Wenn direkt auf das HTML-Element mit dem v-if ein v-else folgt, wird dieses ebenfalls erkannt und bildet den else-Zweig einer if-Abfrage ab. Seit der Version 2.1.0 von Vue gibt es zudem die Direktive v-else-if, um else-if-Abfragen einfacher realisieren zu können. Wenn die Verschachtelung von v-if, v-else beziehungsweise v-else-if nicht korrekt ist, dann moniert Vue diesen Zustand in der Konsole des Browsers.

Ein ähnliches Verhalten zeigt die Direktive v-show. Auch damit lässt sich ein Element, auf Basis einer Bedingung, rendern oder nicht. Der entscheidende Unterschied ist, dass v-if ein echtes bedingtes Rendering ist. Das mit der Direktive markierte Element wird nur dann gerendert, wenn die Bedingung zutrifft. Die Direktive v-show rendert das Element in jedem Fall und setzt, je nach Ergebnis der Bedingung, die CSS-Eigenschaft display auf einen entsprechenden Wert, um das Element anzuzeigen oder nicht. Weitere Informationen zum Thema Conditional Rendering gibt es in Kapitel 7.

2.1.5 Benutzereingaben verarbeiten

Für die Interaktion von Nutzerinnen und Nutzern bietet Vue eine komfortable Möglichkeit über die Direktive v-model an. Damit wird ein Zwei-Wege-Data-Binding initiiert. Damit werden vorhandene Standardwerte angezeigt, zum Beispiel in einem Eingabefeld, Änderungen durch den Benutzer spiegeln sich aber auch automatisch in der gebundenen Variablen wider. Intern wird v-model auf die korrekten Eigenschaften und Events des jeweiligen HTML-Elements gemappt. Bei einer Textbox sind das zum Beispiel die Eigenschaft value und das Event input. Das folgende Code-Snippet erzeugt eine Textbox und bindet den Inhalt an eine Variable. Diese wird zur Kontrolle links des Elements ausgegeben.

<div>

Neue Veranstaltung hinzufügen: {{ eventName }}

<input v-model="eventName" placeholder="Name der Veranstaltung" />

</div>

Eine entsprechende Eigenschaft eventName darf im data-Bereich der Vue-Instanz natürlich nicht fehlen. Bei der Eingabe eines neuen Namens erscheint dieser automatisch als Ausgabe. Das Zwei-Wege-Data-Binding funktioniert demnach. So ist es einfach, eingegebene Daten zu nutzen. In unserem Beispiel: Wenn der Nutzer auf eine Schaltfläche klickt, um die Veranstaltung auch tatsächlich zu erstellen. Eine entsprechende Schaltfläche lässt sich wie folgt definieren.

<button @click="addEvent">Hinzufügen</button>

Vue erwartet nun, dass es eine Methode mit dem Namen addEvent gibt. Ist das nicht der Fall, wird eine entsprechende Meldung auf der Konsole ausgegeben. Wie das Klick-Event genutzt wird und was dahintersteckt, ist Inhalt von Kapitel 7. Methoden haben in einer Vue-Instanz einen besonderen Platz. Neben der data-Sektion gibt es den Abschnitt methods, der die Methoden aufnimmt. Das folgende Code-Snippet zeigt die Definition für die addEvent-Methode:

methods: {

addEvent() {

console.log('Veranstaltung hinzufügen', this.eventName);

},

},

Dieser Bereich kann zum Beispiel unterhalb des Bereichs mit den Daten deklariert werden. Von nun an steht die Methode zur Verfügung. Ein kleiner Test ergibt, dass beim Klicken der Schaltfläche die Meldung auf der Konsole ausgegeben wird. Innerhalb einer Methode steht der gesamte Kontext der Vue-Instanz zur Verfügung. Zusätzlich zur Konsolenausgabe lässt sich die Methode wie folgt erweitern.

Dadurch wird das Array mit den Elementen um ein Objekt erweitert. In diesem Beispiel um ein Objekt für Veranstaltungen mit einer ID, die sich lediglich aus der aktuellen Anzahl der Array-Elemente inkrementiert durch eins ergibt. Zusätzlich ist der Namen der Veranstaltung gespeichert, der über die Variable eventName an das Textfeld gebunden wurde, und die fiktive Anzahl an Teilnehmenden einer Veranstaltung, die in diesem Beispiel immer bei 0 liegt. Vue verwaltet alles Weitere für uns. Das Array wird um einen Eintrag erweitert und die Liste direkt neu gerendert, um den neuen Eintrag anzuzeigen. Das Beispiel verdeutlicht bereits, wie viel Funktionalität sich mit wenigen Zeilen Code erreichen lässt. Auf die spezifischen Syntaxelemente, zum Beispiel das @click, das ein Event darstellt, und v-model, das nur am Rande erwähnt wurde, geht das Buch in Kapitel 7 zur Eingabeverarbeitung noch im Detail ein.

2.1.6 Mit Komponenten kapseln

Ein Kernfeature moderner Web-Frameworks sind Komponenten. Das ist bei Vue nicht anders. Mit Komponenten lassen sich wiederverwendbare Elemente schaffen. Auf unser Beispiel bezogen besteht die Möglichkeit, ein Listenelement in eine Komponente auszulagern. Das bedeutet, dass das HTML-Snippet, das pro Listenelement gerendert wird, als Template in eine Komponente eingebettet ist. Zudem ist dafür zu sorgen, dass die Daten eines Elements in die Komponente hineingereicht werden können, da ansonsten innerhalb der Komponente keine Daten zum Anzeigen vorhanden sind. Für das Beispiel mit der Anzeige einer Veranstaltung bedeutet das, dass zunächst eine neue Komponente anzulegen und zu registrieren ist. Beides kann gleichzeitig erfolgen. Welche anderen Möglichkeiten es gibt, Komponenten zu erstellen, zum Beispiel Single-File Components (SFC) zeigt das Kapitel zu Komponenten (Kapitel 6). Um Komponenten in unser Beispiel einbringen zu können, wird zudem das Erstellen und Mounten der primären Vue-Instanz ein wenig angepasst. Das zeigt das nachfolgende Code-Snippet:

Diese Art der Registrierung ist global. Beim Registrieren einer Komponente ist zunächst der Name ebendieser anzugeben. Darüber lässt sich die Komponente später referenzieren. Anschließend erfolgen Definitionen des Datenbereichs, von Methoden und dergleichen. In diesem Fall brauchen wir aber nur die sogenannten Props und das Template. Letzteres enthält die HTML-Elemente, aus der die Komponente besteht. Dieses HTML wird später gerendert. Mit Props werden Properties, also Eigenschaften angegeben, die von außerhalb der Komponente mit Daten gefüllt werden können. In diesem Fall wird das gesamte Event als Objekt übergeben, um so auf die Eigenschaften im Template zugreifen zu können. Die Definition und Registrierung der Komponente ist damit bereits abgeschlossen. Wenn die Komponente zum Einsatz kommen soll, muss sie über den gleichen Namen referenziert werden, mit dem sie registriert wurde. Im aktuellen Beispiel wird die Schleife wie folgt geändert, um die Komponente als Listenelement zu nutzen.

<div v-for="event in events" :key="event.id">

<event-item :event="event" />

</div>

In der Schleife ist der Bereich mit dem benutzerdefinierten HTML-Element event-item relevant. Über das Binding :event wird das aktuelle Element des Schleifendurchlaufs übergeben, sodass die Daten innerhalb der Komponente zur Verfügung stehen.

Das waren bereits die Basics zu Komponenten in Vue. Diese einfache Deklaration sorgt dafür, dass Komponenten nach und nach in eine Webanwendung integriert werden können, ohne die gesamte Projektstruktur zu ändern.

2.1.7 Das deklarative Rendering und das virtuelle DOM

Das Beispiel aus den Abschnitten zuvor hat bereits erste Möglichkeiten mit der Template-Syntax gezeigt. Das ist ein Kernaspekt von Vue und vielen anderen Web-Frameworks: das Document Object Model (DOM) über diese Template-Syntax mit deklarativen Anweisungen zu verändern. Das HTML-Dokument, nennen wir es einfach mal das originale HTML aus der HTML5-Spezifikation, wird dabei um HTML-Attribute von Vue erweitert, Direktiven genannt. Es gibt direkt in Vue eingebaute Direktiven und selbst erstellte. Das Erstellen von Direktiven ist unter anderem Thema von Kapitel 6.

Im Kern von Vue werden das DOM und die Daten der Vue-Instanz miteinander verbunden. Dadurch wird eine reaktive Verhaltensweise erreicht. Ändern sich die Daten, ändert sich auf fast magische Art und Weise das HTML-Dokument. Somit ist es nicht mehr notwendig, wie bei früheren Ansätzen von Bibliotheken und Frameworks, sich mit dem HTML-Elementen direkt herumzuschlagen, um Änderungen durchzuführen. Das übernimmt Vue für uns. Die Vue-Instanz hängt sich an das DOM und kontrolliert es vollständig. Der gesamte Prozess des deklarativen Rendering bezieht sich also darauf, mit der Template-Syntax Vue-Elemente und -Komponenten an das originale HTML zu heften, damit sich nach der Verknüpfung von DOM und Daten die Magie von Vue entfalten kann. Uns als Entwickler spart das einen Haufen Zeit, Aufwand und vor allem Nerven. Das bisherige, einführende Beispiel hat nur einen kleinen Teil dessen gezeigt, was möglich ist. Dass sich bei Änderungen in den Daten direkt das DOM mit anpasst, hat viel mit dem Reactivity-System von Vue zu tun. Dazu gibt es detaillierte Informationen in Kapitel 5.

Das DOM eines HTML-Dokuments ist das geparste Resultat des Browsers, wenn die HTML-Anweisungen verarbeitet wurden. Das DOM ist also nicht das HTML-Dokument an sich, sondern eine baumartige Struktur im Speicher. Diese wird vom Browser genutzt, um die Seite neu zu zeichnen. Das passiert nicht nur einmal, sondern bei jeder Änderung, zum Beispiel durch einen Mausklick. Diese Baumstruktur zu verändern, ist sehr aufwendig. Nehmen wir zum Beispiel die folgende Anweisung, ein Standardkonstrukt in JavaScript.

document.getElementById('listId').appendChild(newEntryNode);

Das ist eine kleine Anpassung. Allerdings muss das Element mit der ID listId zunächst im gesamten DOM gesucht werden. Allein das ist schon aufwendig.

Um die Anpassungen am DOM performant zu gestalten, nutzt Vue, ebenfalls wie viele andere Web-Frameworks auch, ein sogenanntes virtuelles DOM. Damit ist ein Paradigma gemeint, um mit dem realen DOM besser umgehen zu können. Konkret legt Vue eine Kopie des realen DOM in JavaScript an. Das DOM liegt somit nicht als deklaratives HTML, sondern als leichtgewichtiges JavaScript-Objekt vor, das durch Render-Funktionen erstellt wurde. Virtuelle Knoten (VNode) repräsentieren die HTML-Struktur im Speicher. Vue weiß, wie diese virtuellen Knoten wieder in konkrete HTML-DOM-Knoten konvertiert werden. So einen Knoten zu aktualisieren, gestaltet sich deutlich weniger aufwendig. Das könnte beispielsweise wie folgt aussehen.

domNode.children.push('<ul>Veranstaltung 9</ul>');

Diese virtuellen Knoten benötigen als Argumente unter anderem das Element, ein Objekt mit Daten, Propertys (props) und Attributen (attrs) sowie ein Array. In diesem Array sind die Kindelemente des jeweiligen virtuellen Knotens enthalten, die ebenfalls die gerade beschriebenen Argumente besitzen. Der Hintergrund ist, dass Anpassungen am HTML-DOM aufwendig durchzuführen sind. Aktualisierungen in JavaScript sind aber sehr performant. Daher werden Anpassungen und Zugriffe auf das DOM erst auf das virtuelle DOM abgebildet. Das erlaubt es, mehrere Zugriffe und Änderungen zu bündeln und das finale Ergebnis gesammelt im realen DOM abzubilden. Um zu wissen, welche Elemente im originalen DOM verändert werden müssen, werden über einen Algorithmus die Unterschiede beider DOMs ermittelt. Dieser Prozess wird häufig als Reconciliation bezeichnet (siehe Abbildung 2–1).

Bei den Templates innerhalb von Komponenten ist es bei Vue so realisiert, dass das HTML-Template automatisch in Render-Funktionen kompiliert wird. Weitere Informationen zu den Komponenten finden sich in Kapitel 6. Der gesamte Prozess des Rendering eines virtuellen DOM hin zum realen ist in Abbildung 2–2 zu sehen.

Abb. 2–1Schematischer Ablauf des Diff-Prozesses zwischen verschiedenen DOMs

Abb. 2–2Schematischer Ablauf des Render-Prozesses mit einem virtuellen DOM

3Vue 3 im Überblick

In Vue 3 sind zahlreiche Änderungen eingeflossen, die in einem länger andauernden Prozess definiert, der Community im Voraus vorgestellt und mit dieser diskutiert worden sind. Diese Diskussionen hatten nicht immer einen Fokus auf einen sachlichen Diskurs. Die Ankündigungen, erste Request-for-Comments-Dokumente (RFCs) und Beispiele zu den geplanten Änderungen zu Vue 3 haben durchaus kontroverse und heftige Diskussionen ausgelöst. Das betrifft insbesondere die Spezifikation zum Composition API (vorgestellt im Juni 2019). Viele Diskussionen wurden durch Missverständnisse befördert. Zum Beispiel war nicht allen von Anfang an klar, dass das neue Composition API optional ist und das vorhandene Options API nicht ersetzen sollte. Letztendlich zeigen diese Reaktionen deutlich, dass Änderungen an Frameworks aller Art durchaus stressig sind und sich eine Community missverstanden oder angegriffen fühlen kann.

Zahlreiche Neuerungen haben es in die finale Version geschafft, bei anderen wurden verschiedene Implementierungen getestet und wiederum andere Ideen dagegen komplett verworfen. Laut Release-Post (Team V., Release-Post zu v3.0.0 One Piece, 18) auf GitHub hat sich die Performance deutlich verbessert (Team V., Vue 3 vs. Vue 2 Perf comparison, 2022) sowie die Größe der Bibliothek und der Speicherverbrauch verringert.

3.1Warum neu schreiben?

Eine primäre Frage bei der neuen Vue-Version ist, warum diese zu einem Großteil neu implementiert wurde. Diese Tendenz gibt es bei Softwareprojekten immer wieder, weil sich die Rahmenbedingungen, Anforderungen und technischen Voraussetzungen ändern und die Verlockung groß ist, bei der nächsten Version noch mal von vorne anzufangen.