React vs. Vue: Der Vergleich für dein nächstes Projekt

So ist der Vergleich aufgebaut

Methodik: Dieser Vergleich nutzt ausschließlich die offiziellen Dokumentationen von React (react.dev) und Vue (vuejs.org), Stand 28.10.2026. Kriterien sind: Schreibweise der Oberflächen, Zustandsverwaltung, Rendering und SEO, TypeScript-Unterstützung, Einstieg sowie Ökosystem. Es gibt keine eigenen Benchmarks, keine Performance-Messungen und keine Popularitätszahlen. Aussagen über Stärken eines Frameworks sind als Darstellung der jeweiligen Dokumentation gekennzeichnet, denn beide Dokumentationen werben naturgemäß für ihr Projekt.

React ist laut Dokumentation um Komponenten herum gebaut: Eine Komponente ist ein Teil der Oberfläche mit eigener Logik und eigenem Aussehen. Vue beschreibt sich selbst als JavaScript-Framework für Benutzeroberflächen mit deklarativem, komponentenbasiertem Programmiermodell. Beide wollen also dasselbe; sie unterscheiden sich darin, wie du eine Komponente aufschreibst und wie sich ihr Zustand verhält.

Die Grundidee im Überblick

JSX oder Templates

In React schreibst du Markup direkt im JavaScript. JSX ist laut Dokumentation optional, wird aber in den meisten React-Projekten verwendet. Es ist strenger als HTML: Tags müssen geschlossen werden, und mehrere Elemente brauchen ein gemeinsames Elternelement. Mit geschweiften Klammern bettest du JavaScript-Ausdrücke ein:

<h1>{user.name}</h1>

Vue erweitert HTML um eine Template-Syntax. Die Vue-Dokumentation nennt Single-File-Components die empfohlene Art, Komponenten zu schreiben, sofern ein Build-Setup vorhanden ist: Logik, Template und Styles liegen in einer Datei. Ohne Build-Schritt lässt sich Vue laut Dokumentation auch schrittweise in bestehendes HTML einbauen; das ist Teil seines Konzepts als „progressives“ Framework.

Praktisch heißt das: Wer die Trennung von Struktur und Logik schätzt, empfindet Vue-Templates als vertraut. Wer lieber alles in einer Sprache hat und Oberflächenlogik mit normalen Schleifen und Funktionen schreibt, findet in JSX seinen Zugang. Das ist eine Frage von Gewohnheit, nicht von Leistungsfähigkeit.

Dieselbe Komponente in beiden Frameworks

Ein Zähler, der bei jedem Klick hochzählt und einen Startwert als Eigenschaft (Prop) akzeptiert. Zuerst React:

import { useState } from "react";

export default function Counter({ start = 0 }) {
  const [count, setCount] = useState(start);

  return (
    <button type="button" onClick={() => setCount(count + 1)}>
      Zähler: {count}
    </button>
  );
}

Dann Vue mit <script setup> (Composition API):

<script setup>
import { ref } from "vue";

const props = defineProps({ start: { type: Number, default: 0 } });
const count = ref(props.start);
</script>

<template>
  <button type="button" @click="count++">Zähler: {{ count }}</button>
</template>

Beide Beispiele wurden syntaktisch geprüft, aber nicht im Browser ausgeführt (siehe redaktioneller Hinweis zur Codeprüfung). Die Unterschiede sind gut sichtbar: React ruft setCount auf und rendert die Funktion neu, Vue verändert count direkt, und die Oberfläche folgt. Dafür brauchst du in Vue im Script .value, im Template nicht.

State: Hooks gegen Reactivity

Hier liegt der konzeptionell größte Unterschied. In React sind Komponenten Funktionen, die nach jeder Zustandsänderung erneut ausgeführt werden. Hooks wie useState merken sich den Zustand zwischen den Läufen, und die React-Dokumentation gibt Regeln vor: Hooks dürfen nur auf oberster Ebene einer Komponente oder eines anderen Hooks aufgerufen werden, nicht in Bedingungen oder Schleifen.

Vues Composition API läuft anders. Die Vue-Dokumentation stellt den Unterschied in ihrem FAQ so dar: Das setup beziehungsweise <script setup> läuft nur einmal, Abhängigkeiten von berechneten Werten und Watchern werden automatisch erfasst, und die Aufrufreihenfolge spielt keine Rolle. Bei React-Hooks nennt sie als Nachteile unter anderem veraltete Werte in Closures bei falschen Abhängigkeits-Arrays sowie manuell gepflegtes Caching mit useMemo und useCallback. Dieselbe Seite erwähnt, dass der React Compiler manche dieser Punkte entschärfen kann.

Behandle diese Gegenüberstellung als die Sicht der Vue-Dokumentation. Sie beschreibt reale Eigenheiten, ist aber nicht neutral. Die Kehrseite: Vues automatische Verfolgung setzt voraus, dass du Reaktivität verstehst (etwa wann ein ref nötig ist). Die Vue-Dokumentation sagt selbst, dass die Composition API mehr Verständnis der Reaktivität verlangt und die Options API einsteigerfreundlicher sei. Sie erklärt außerdem, dass die Options API nicht abgeschafft werden soll und für viele Szenarien geringer bis mittlerer Komplexität eine solide Wahl bleibt.

Rendering, SSR und SEO

Für Websites, die über Suchmaschinen gefunden werden sollen, zählt, welches HTML ein Crawler beim ersten Abruf bekommt. Beide Frameworks lösen das mit serverseitigem Rendering (SSR) oder statischer Generierung (SSG).

• React: Die Dokumentation empfiehlt für neue Apps und Websites, mit einem Framework zu beginnen, und nennt Next.js (App Router), React Router (v7) und Expo für native Apps. Solche Frameworks unterstützen Client-Rendering, Single-Page-Apps und statische Generierung und erlauben SSR pro Route bei Bedarf. Next.js gibt es laut Dokumentation auch als statischen Export ohne Server. Wer ohne Framework arbeitet, wählt Werkzeuge für Routing und Datenabruf selbst.
• Vue: Die SSR-Seite beschreibt Server-Rendering mit anschließender Hydration, bei der der Browser das fertige HTML übernimmt und interaktiv macht. Für eine vollständige Umsetzung empfiehlt sie Vue-Frameworks mit eingebauter SSR-Unterstützung. Für wenige Marketingseiten oder Content-Sites schlägt sie statische Generierung vor.

Die Vue-Dokumentation weist zudem darauf hin: Suchmaschinen wie Google und Bing können synchrone JavaScript-Apps indexieren, aber wenn Inhalte nach einem Ladevorgang asynchron nachgeladen werden, kann ein Crawler nicht warten, sodass SSR für SEO-kritische Seiten nötig sein kann. Einen praxisnahen Blick auf das Thema bietet die JavaScript-SEO-Seite.

Wichtig: Ob eine reine Client-App ausreicht, hängt von der Seite ab. Ein internes Dashboard braucht kein SSR; Inhalte, die gefunden werden sollen, schon eher.

TypeScript

Beide Frameworks unterstützen TypeScript. In React brauchst du die Typdefinitionen @types/react, Dateien mit JSX tragen die Endung .tsx, und Props typisierst du mit interface oder type. Vue ist laut Dokumentation selbst in TypeScript geschrieben und liefert Typen mit. In Single-File-Components setzt du lang="ts"; Template-Ausdrücke werden dann ebenfalls typgeprüft. Für die Prüfung auf der Kommandozeile nennt die Vue-Dokumentation vue-tsc, ein Wrapper um tsc, der .vue-Dateien versteht. Die Vor- und Nachteile von Typen allgemein behandelt der Artikel TypeScript vs. JavaScript.

Ökosystem und Einstieg

Das Ökosystem unterscheidet sich vor allem in der Aufteilung. React liefert den Kern für Oberflächen; Routing, Datenabruf und Rendering ergänzt du über ein Framework oder eigene Bibliotheken, die Dokumentation nennt dafür wie oben beschrieben Next.js, React Router und Expo. Vue beschreibt sich als progressives Framework, das vom einzelnen Widget bis zur Full-Stack-Anwendung mit SSR oder SSG skaliert, und sagt, dass das Grundwissen über alle diese Einsatzbereiche übertragbar bleibt.

Zur Lernkurve lässt sich dokumentationsbasiert wenig Objektives sagen. Belegt ist: React verlangt Verständnis von JSX, Komponenten und den Hook-Regeln; Vue bietet zwei API-Stile, wovon die Options API laut Doku einsteigerfreundlicher ist. Ob dir das leichter fällt, hängt von deinem Hintergrund ab. Wenn du noch am Anfang stehst, hilft die Entscheidungshilfe zur ersten Programmiersprache, bevor du ein Framework wählst.

Was sich bei der Entscheidung oft verschiebt

Häufig wird die Frage „React oder Vue?“ auf Technik reduziert, obwohl die Rahmenbedingungen entscheiden. Prüfe vor der Wahl vier Dinge: Welche Kenntnisse hat das Team, das den Code später pflegt? Gibt es bereits Komponenten, Design-Systeme oder Bibliotheken, die du weiterverwenden willst? Muss die Seite für Suchmaschinen vorgerendert werden, und welches Framework der gewählten Bibliothek bietet das in der Form, die dein Hosting unterstützt? Und wie lange soll das Projekt gepflegt werden – denn größere Versionssprünge kosten in jedem Framework Zeit.

Ein Beispiel für den letzten Punkt steht in der Vue-Dokumentation selbst: Vue 3 ist die aktuelle Hauptversion und für neue Projekte empfohlen, Vue 2 hat am 31. Dezember 2023 sein Lebensende erreicht. Wenn du also ältere Tutorials oder Code findest, prüfe immer, für welche Hauptversion sie geschrieben sind. Das gilt genauso für React: Die Dokumentation unter react.dev beschreibt Funktionskomponenten mit Hooks; ältere Anleitungen können einen anderen Stil verwenden.

Wann welches Framework?

Statt einer Pauschalantwort einige Kriterien, aus denen du ableiten kannst:

Daneben gibt es weitere Optionen, etwa Svelte, Angular oder Astro für überwiegend statische Seiten. Sie sind nicht Teil dieses Vergleichs, und für sie wurden keine Quellen geprüft.

Dein nächster Schritt

Lege je ein kleines Projekt an, in dem du die Zähler-Komponente von oben baust, und erweitere sie um ein Eingabefeld, dessen Wert angezeigt wird. Notiere, wo du im Code stolperst: bei den Hook-Regeln, bei .value, bei der Projektstruktur. Das gibt dir eine belastbarere Grundlage als jeder allgemeine Vergleich. Frage danach, ob die Seite öffentlich auffindbar sein soll, und lies für das gewählte Framework das Kapitel zu SSR beziehungsweise zu den empfohlenen Frameworks. Wenn du Daten aus Diensten einbindest, hilft der Artikel zu API-Schnittstellen.