Vue

Kurz: Ein Frontend-Framework, das bewusst zwischen React (flexibel, minimal) und Angular (Komplettlösung) positioniert ist — bekannt für seine niedrige Einstiegshürde.

Genauer: Vue nutzt eine HTML-nahe Template-Syntax (statt JSX wie React) und lässt sich sowohl minimal (einzelne Seitenkomponenten aufwerten) als auch als vollständiges Framework für ganze Single-Page-Apps einsetzen. Beliebt vor allem, weil man Vue-Dateien fast wie normales HTML lesen kann.

Im Detail

Eine typische Vue-Komponente (.vue-Datei) bündelt Template, Logik und Styling in einer Datei:

<template>
  <button @click="zaehler++">Geklickt: {{ zaehler }}</button>
</template>
 
<script setup>
import { ref } from "vue";
const zaehler = ref(0);
</script>
 
<style scoped>
button { padding: 8px 16px; }
</style>

Der <template>-Block liest sich fast wie normales HTML mit ein paar zusätzlichen Direktiven (@click für Event-Handling, {{ }} für eingebettete Werte) — im Gegensatz zu JSX bei React, wo HTML-artige Syntax direkt in JavaScript eingebettet wird. Diese Nähe zu klassischem HTML/CSS/JS senkt die Einstiegshürde besonders für Entwickler, die von reinem Frontend-Handwerk (statt komplexer JavaScript-Toolchains) kommen.

Vue wurde ursprünglich von einem einzelnen Entwickler (Evan You, ehemals bei Google auf das Angular-Team) als “das Beste aus beiden Welten” konzipiert: die Flexibilität und geringe Meinungsstärke von React, kombiniert mit einigen der eingebauten Komfortfunktionen von Angular (z. B. Zwei-Wege-Datenbindung out-of-the-box). Das Ökosystem ist kleiner als das von React, aber mit offiziell gepflegten Zusatzpaketen für Routing (Vue Router) und State-Management (Pinia) trotzdem vollständig genug für große Anwendungen, ohne dass man sich wie bei React durch eine unübersichtliche Auswahl von Drittanbieter-Bibliotheken entscheiden muss.

Reaktivität als Kernkonzept

Vues zentrales technisches Feature ist sein reaktives Datensystem: Verändert sich ein mit ref() oder reactive() markierter Wert, aktualisiert Vue automatisch genau die Teile der UI, die von diesem Wert abhängen — ohne dass der Entwickler explizit ein Neu-Rendern auslösen muss, wie es bei manchen anderen Ansätzen nötig ist. Intern erreicht Vue das über JavaScript-Proxys, die Lese- und Schreibzugriffe auf reaktive Objekte abfangen und automatisch nachverfolgen, welche UI-Teile von welchen Daten abhängen — ein grundlegend anderer technischer Ansatz als Reacts Vergleich des gesamten virtuellen DOM-Baums bei jedem Render.

Options API vs. Composition API

Vue bietet seit Version 3 zwei parallele Schreibweisen für Komponenten: die ältere Options API (Logik in feste Kategorien wie data, methods, computed aufgeteilt, gut für Einsteiger durch klare Struktur) und die neuere Composition API (<script setup>, wie im Beispiel oben — Logik wird frei nach thematischer Zusammengehörigkeit statt nach technischer Kategorie gruppiert, ähnlich Reacts Hooks). Composition API eignet sich besser für komplexe Komponenten mit viel wiederverwendbarer Logik, Options API bleibt aber vollständig unterstützt und in vielen bestehenden Projekten der Standard.

Verbreitung und Einsatzgebiete

Vue ist besonders in Teams populär, die eine sanftere Lernkurve als React suchen, aber mehr eingebaute Struktur als reines JavaScript wollen — häufig in Content-Management-Systemen, Admin-Dashboards und bei Teams, die schrittweise von serverseitig gerendertem HTML zu interaktiveren Oberflächen migrieren (da sich Vue, anders als React, auch sehr einfach nur für einzelne Seitenabschnitte einer sonst klassischen Website nutzen lässt, ohne die gesamte Seite zu einer Single-Page-Application umzubauen).

Siehe auch: React, Angular