React vs. Vue: Unterschiede mit Code im Vergleich

React und Vue sind beide JavaScript-Werkzeuge, um Benutzeroberflächen aus Komponenten zu bauen (React nennt sich Bibliothek, Vue progressives Framework), und sie teilen die meisten Ideen: Props nach unten, Events nach oben, reaktiver State, ein virtuelles DOM. Die praktischen Unterschiede: React schreibt Markup in JSX und erwartet, dass State mit einem Setter ersetzt wird, während Vue Markup in HTML-Templates innerhalb von Single-File Components schreibt und dich reaktive Werte direkt ändern lässt. Hier ist ein Zähler in React:

import { useState } from 'react';

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

    return (
        <button onClick={() => setCount(count + 1)}>
            Clicked {count} times
        </button>
    );
}

Und derselbe Zähler als Single-File Component in Vue (Counter.vue):

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

const count = ref(0);
</script>

<template>
    <button @click="count++">Clicked {{ count }} times</button>
</template>

useState(0) wird zu ref(0), onClick wird zu @click, und {count} wird zu {{ count }}. Der sichtbare Unterschied ist count++: Vue lässt dich den Wert direkt ändern, und sein Reaktivitätssystem bemerkt es. React braucht setCount, weil es nur erneut rendert, wenn du ihm einen neuen Wert gibst.

JSX vs. Single-File Components

Eine React-Komponente ist eine JavaScript-Funktion, die JSX zurückgibt. Bedingungen sind && oder ein ternärer Operator, Listen sind .map(), und Styles kommen aus dem, was du wählst (CSS-Dateien, CSS Modules, ein Utility-Framework).

Eine Vue-Komponente ist meist eine .vue-Datei mit drei Blöcken: <script setup> für die Logik, <template> für das Markup und ein optionales <style scoped>, dessen CSS nur für diese Komponente gilt. Templates nutzen Direktiven: v-if, v-for, v-model für Two-Way-Binding an Inputs, :prop, um einen Wert zu binden, und @event, um zuzuhören. Templates halten das Markup für jeden lesbar, der HTML kennt; JSX gibt dir im Markup das ganze JavaScript. Vue kann auch JSX nutzen, React keine Templates, aber der meiste Code folgt jeweils dem Standard.

Hier ist eine gefilterte Liste, das zweite Feature zum Vergleichen.

import { useState } from 'react';

const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];

export default function App() {
    const [query, setQuery] = useState('');

    const visible = fruits.filter((f) =>
        f.toLowerCase().includes(query.toLowerCase())
    );

    return (
        <div>
            <input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <ul>
                {visible.map((fruit) => (
                    <li key={fruit}>{fruit}</li>
                ))}
                {visible.length === 0 && <li>No match</li>}
            </ul>
        </div>
    );
}

Tippe xyz, um die Meldung für leere Ergebnisse zu sehen, und lösch es dann wieder. Die Vue-Version:

<script setup>
import { ref, computed } from 'vue';

const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];
const query = ref('');

const visible = computed(() =>
    fruits.filter((f) => f.toLowerCase().includes(query.value.toLowerCase()))
);
</script>

<template>
    <input v-model="query" placeholder="Filter fruit" />
    <ul>
        <li v-for="fruit in visible" :key="fruit">{{ fruit }}</li>
        <li v-if="visible.length === 0">No match</li>
    </ul>
</template>

v-model ersetzt das Paar aus value und onChange, und computed ersetzt die einfache Variable. In React wird visible bei jedem Render neu berechnet, weil die Komponentenfunktion erneut läuft; in Vue cacht computed den Wert und berechnet ihn nur neu, wenn sich query ändert. Beide nutzen einen key, um Listeneinträge zu unterscheiden.

Das Reaktivitätsmodell

Das ist der tiefste Unterschied zwischen den beiden.

React: unveränderlicher State und erneutes Rendern. State ist eine Momentaufnahme. Du rufst einen Setter mit einem neuen Wert auf, React führt die Komponentenfunktion erneut aus, vergleicht das neue JSX mit dem alten und aktualisiert das DOM. React vergleicht Werte mit Object.is, also sieht ein direkt geändertes und unverändert zurückgegebenes Objekt oder Array aus wie gar keine Änderung.

import { useState } from 'react';

export default function App() {
    const [items, setItems] = useState(['one']);

    function mutate() {
        items.push('pushed');
        setItems(items);
    }

    function replace() {
        setItems([...items, 'added']);
    }

    return (
        <div>
            <button onClick={mutate}>push() in place</button>
            <button onClick={replace}>New array</button>
            <p>{items.join(', ')}</p>
        </div>
    );
}

Klicke auf „push() in place“, und auf dem Bildschirm ändert sich nichts, weil das Array dasselbe Objekt ist. Klicke dann auf „New array“: Der Render zeigt auch pushed, weil die frühere Mutation wirklich passiert ist, React hatte nur keinen Grund hinzusehen. Die Seite zu useState behandelt dieses Muster ausführlich.

Vue: veränderliche reaktive Werte. Ein ref oder ein reactive-Objekt merkt sich, wer es liest (ein ref über seinen Getter .value, ein reactive-Objekt über einen Proxy). Wenn du hineinschreibst, weiß Vue genau, welche berechneten Werte, Watcher und Template-Teile davon abhängen, und aktualisiert nur diese. In Vue aktualisiert items.value.push('pushed') den Bildschirm. Du schreibst weniger Zeremonie und gibst die Garantie auf, dass sich ein Wert nie unter dir ändert.

Keins der Modelle ist in einer für typische Apps relevanten Weise schneller. React führt pro Änderung womöglich mehr Komponentencode aus und verlässt sich auf Memoisierung (von Hand oder über den React Compiler), um Arbeit zu überspringen; Vue verfolgt Abhängigkeiten zur Laufzeit und überspringt diese Arbeit standardmäßig.

Composition API vs. Hooks

Die Composition API von Vue 3 und React Hooks lösen dasselbe Problem: zusammengehörigen State und Logik bündeln und über Komponenten hinweg wiederverwenden. Vue nennt die wiederverwendbaren Funktionen Composables (useMouse()), React nennt sie Custom Hooks (useMouse()). Die Regeln unterscheiden sich, weil der Code zu unterschiedlichen Zeitpunkten läuft.

• Wann er läuft. Ein setup in Vue läuft einmal, wenn die Komponente erzeugt wird. Eine React-Komponentenfunktion läuft bei jedem Render, und die Hooks darin laufen mit.
• Regeln zur Reihenfolge. React ordnet Hooks nach der Reihenfolge der Aufrufe zu, also kannst du sie nicht in Bedingungen oder Schleifen aufrufen. Vue hat für ref und computed keine solche Regel, weil setup einmal läuft.
• Abhängigkeiten. Effekte und Memos in React listen ihre Abhängigkeiten in einem Array, das du pflegst. watchEffect und computed in Vue verfolgen automatisch, was sie lesen.
• Veraltete Werte. Ein Callback in React kann einen alten State-Wert aus einem früheren Render festhalten (der klassische Bug mit setInterval). Ein Callback in Vue liest count.value beim Aufruf und sieht immer den aktuellen Wert.

Das Modell von React macht jeden Render zu einer puren Funktion von Props und State, was sich leicht testen und nachvollziehen lässt. Das Modell von Vue beseitigt eine ganze Klasse von Bugs rund um Abhängigkeitsarrays. Wer eins kennt, lernt das andere meist schnell.

Ökosystem

Das Muster in dieser Tabelle: Das Kernteam von Vue pflegt Router, Store und DevTools gemeinsam, also hat ein Vue-Projekt für jedes davon einen naheliegenden Standard. React überlässt das der Community, was dir mehr Optionen und mehr Entscheidungen gibt. Vite, das übliche Build-Tool für neue Projekte in beiden, wurde vom Schöpfer von Vue gestartet.

Lernkurve

Vue ist oft der sanftere Einstieg. Templates lesen sich wie das HTML, das du schon kennst, v-model erspart den Boilerplate kontrollierter Inputs, und ein reaktiver Wert aktualisiert den Bildschirm, wenn du ihn änderst. React verlangt gleich zu Beginn JSX und die Gewohnheit unveränderlicher Updates, und die Seite zu JSX ist das Erste, was die meisten brauchen.

Nach den Grundlagen wird der Abstand kleiner. Vue bringt eigene Konzepte mit (Refs vs. reaktive Objekte, .value in Scripts, aber nicht in Templates, Watcher), und React bringt Effekte, Memoisierung und die Regeln der Hooks. Stellenanzeigen in deiner Region sind ein nützlicherer Entscheider als die Syntax.

Wann du was wählst

Wähle React, wenn:

• du eine große Auswahl an Bibliotheken und Komponenten aus der Community willst oder native mobile Apps mit React Native bauen willst.
• du Logik und Markup gern in einer JavaScript-Funktion hältst und ein Framework wie Next.js willst.
• dein Team explizite, unveränderliche Updates schätzt, die jeden Render leicht nachvollziehbar machen.

Wähle Vue, wenn:

• du offizielle, aufeinander abgestimmte Werkzeuge für Routing und State willst und weniger Entscheidungen treffen möchtest.
• zu deinem Team Designer oder Backend-Entwickler gehören, die sich mit HTML-Templates wohlfühlen.
• du bestehenden, serverseitig gerenderten Seiten Interaktivität hinzufügst: Vue lässt sich per Script-Tag in eine Seite einbinden und von dort aus erweitern.

Beide sind ausgereift und werden von Unternehmen jeder Größe in der Produktion genutzt, und die Konzepte, die du in einem lernst (Komponenten, Props, abgeleiteter State, Listen mit Keys), lassen sich direkt auf das andere übertragen.