Was ist Vue.js?

Was ist Vue.js?

Vue.js ist ein quelloffenes JavaScript-Framework zum Bauen von Benutzeroberflächen. Es setzt auf Standard-HTML, -CSS und -JavaScript und bietet ein deklaratives, komponentenbasiertes Modell: Sie beschreiben, wie die Seite für einen bestimmten Zustand aussehen soll, und Vue aktualisiert das DOM, sobald sich der Zustand ändert. Aktuelle Hauptversion ist Vue 3.

So funktioniert Vue

Vue erweitert HTML um eine Template-Syntax und verfolgt den reaktiven Zustand, den Ihr Template liest. Ändert sich ein Wert, rendert Vue nur neu, was davon abhängt. Komponenten schreibt man meist als Single-File-Komponenten (.vue-Dateien), die Logik, Template und Styles zusammenhalten. Mit Build-Schritt ist das laut Vue-Dokumentation der empfohlene Weg. Eine Vue-3-Komponente im Stil der Composition API sieht so aus:

<script setup> import { ref } from 'vue'; const count = ref(0) </script> <template><button @click="count++">Zähler: {{ count }}</button></template>

Options API und Composition API

Vue bietet zwei Schreibweisen auf demselben Fundament. Die Options API ist auf der Composition API aufgebaut.

• Options API: Die Logik ist in Optionen wie data, methods und mounted gegliedert. Sie ist einsteigerfreundlicher.
• Composition API: Zustand und Funktionen werden direkt deklariert, meist mit <script setup>. Sie ist freier und passt zu größeren Anwendungen und wiederverwendbarer Logik.

Die Vue-Dokumentation empfiehlt die Options API für einfache Fälle mit schrittweiser Erweiterung und die Composition API mit Single-File-Komponenten für vollständige Anwendungen.

Wo Vue eingesetzt wird

Vue versteht sich als progressives Framework: Man kann es Schritt für Schritt einführen. Die Dokumentation nennt diese Einsatzarten:

• Statisches HTML ohne Build-Schritt erweitern.
• Als Web Components in beliebige Seiten einbetten.
• Eine clientseitige Single-Page-Anwendung (SPA) mit Vite.
• Fullstack mit serverseitigem Rendering (SSR), bei dem der Browser das HTML anschließend hydratisiert. Dafür ist Nuxt das übliche Meta-Framework.
• Statische Seitengenerierung (Jamstack).

Vue 2 ist am Ende seiner Lebensdauer

Laut vuejs.org hat Vue 2 am 31. Dezember 2023 das Ende seiner Lebensdauer erreicht. Version 2.7 war die letzte Nebenversion. Wer noch Vue 2 betreibt, sollte die Migration zu Vue 3 einplanen; als Übergang verweist die Vue-Seite auf Extended LTS eines Drittanbieters.

Häufige Fehler

• Eine Prop in der Kindkomponente ändern, statt ein Ereignis an die Elternkomponente zu senden.
• .value bei einer ref in <script setup> vergessen, während Templates sie automatisch entpacken.
• Eine reine Client-SPA ausliefern und den ersten Seitenaufruf ignorieren: Ein großes JavaScript-Bundle verzögert, was Nutzer sehen.
• Sehr lange Listen rendern, ohne zu begrenzen, was im DOM liegt.
• Vue-2-Anleitungen mit Vue-3-Code mischen und dann auf APIs stoßen, die es nicht mehr gibt.

Vue und Performance-Tests

Ein Lasttest schickt Verkehr an Ihre Server und APIs. Ihren Vue-Code führt er nicht aus, er zeigt also weder langsames Rendering noch ein schweres Bundle. Das messen Sie in einem echten Browser: Der kostenlose Core-Web-Vitals-Checker liefert Felddaten zu einer URL, und die Seitengeschwindigkeits-Überwachung führt geplante Lighthouse-Audits aus und alarmiert bei Verschlechterungen. Mehr dazu in unseren Beiträgen zu JavaScript-Performance und Frontend-Performance-Tests (auf Englisch).

Häufige Fragen

Ist Vue.js ein Framework oder eine Bibliothek?

Die Vue-Dokumentation nennt es ein Framework. Der Kern konzentriert sich auf die View-Schicht, Routing und State-Management kommen aus Begleitbibliotheken, die Sie bei Bedarf ergänzen.

Wird Vue 2 noch unterstützt?

Nein. Vue 2 hat am 31. Dezember 2023 das Ende seiner Lebensdauer erreicht. Neue Projekte sollten Vue 3 nutzen.

Options API oder Composition API?

Beides funktioniert, denn beide laufen auf demselben Fundament. Die Vue-Dokumentation empfiehlt die Composition API mit Single-File-Komponenten für vollständige Anwendungen und die Options API für einfachere Fälle ohne Build-Schritt.

Kann Vue auf dem Server rendern?

Ja. Vue unterstützt serverseitiges Rendering und statische Seitengenerierung, und Nuxt baut darauf ein vollständiges Anwendungs-Framework auf.