Vue Composition API: moderne Komponenten schreiben

Die Vue Composition API ist der moderne Schreibstil, der mit Vue 3 eingeführt wurde: Sie bündelt die Logik einer Komponente in einer einzigen setup-Funktion, statt sie über Optionen wie data, methods und computed zu verstreuen. In diesem Leitfaden gehe ich die zentralen Werkzeuge durch — ref, reactive, computed und watch — mit echten Beispielen, damit deine Komponenten auch beim Wachsen aufgeräumt und wiederverwendbar bleiben.

Von der Options API zur Composition API

In der klassischen Options API liegen Zustand, berechnete Werte und Methoden einer Komponente in getrennten Blöcken. Bei kleinen Komponenten ist das in Ordnung, doch wenn ein Feature wächst, verteilt sich Code, der zum selben Anliegen gehört, über die ganze Datei. Mit der Composition API hältst du zusammengehörige Logik beisammen: der Zustand eines Zählers, sein abgeleiteter Wert und seine Funktion stehen nebeneinander.

Beide Stile werden in Vue 3 vollständig unterstützt — die Composition API ist eine Option, keine Pflicht. Ihr größter Vorteil zeigt sich, wenn du teilbare Logik (Composables) schreibst.

setup und <script setup>

Der praktischste Weg, die Composition API zu nutzen, ist die Compile-Time-Syntax <script setup>. Jede Variable und Funktion, die du dort deklarierst, wird automatisch im Template verfügbar, und du brauchst kein return.

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

const count = ref(0)
function increment() {
  count.value++
}
</script>

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

Hinweis: In JavaScript liest du den Wert über count.value, doch im Template entpackt Vue .value automatisch; dort schreibst du nur count.

Reaktive Werte mit ref

Verwende ref für einzelne Werte (Zahl, String, Boolean). Es gibt ein Objekt zurück, dessen tatsächlicher Wert in der Eigenschaft .value steckt. Das ist die Grundlage der Reaktivität, mit der Vue das DOM aktualisiert, wenn sich der Wert ändert.

Lesen/Schreiben: const name = ref('Ada') → name.value = 'Grace'
Ideal für Primitive: string, number, boolean.
Kann auch Objekte halten: Steckst du ein Objekt in ein ref, macht Vue dessen Inhalt mit reactive tief reaktiv.

Objektzustand mit reactive

Wenn du mehrere zusammengehörige Felder gemeinsam verwalten willst, passt reactive gut. Es nimmt ein Objekt und macht daraus einen tief reaktiven Proxy; hier schreibst du kein .value, sondern greifst direkt auf die Eigenschaften zu.

import { reactive } from 'vue'

const form = reactive({
  email: '',
  agreed: false,
})

function submit() {
  console.log(form.email, form.agreed)
}

Was wählen? Eine praktische Faustregel: ref für Primitive und einzelne Zustandsteile, reactive für ein Formular oder Objekt, das logisch ein Ganzes bildet. Beachte: Ein reactive-Objekt kannst du nicht als Ganzes neu zuweisen (das bricht die Referenz) — aktualisiere stattdessen seine Felder oder bevorzuge ref.

Abgeleitete Werte mit computed

computed erzeugt Werte, die aus anderen reaktiven Quellen berechnet und zwischengespeichert werden, bis sich ihre Abhängigkeiten ändern. Statt dasselbe Ergebnis im Template immer wieder neu zu berechnen, definierst du es einmal.

import { ref, computed } from 'vue'

const price = ref(100)
const quantity = ref(3)
const total = computed(() => price.value * quantity.value)

total verhält sich wie ein ref: total.value in JavaScript, {{ total }} im Template. Ändert sich price oder quantity, berechnet Vue total automatisch neu.

Seiteneffekte mit watch und watchEffect

Für Seiteneffekte — eine Netzwerkanfrage auslösen, in localStorage schreiben — wenn sich ein Wert ändert, greifst du zu watch. Es beobachtet eine bestimmte Quelle und gibt dir den alten und neuen Wert.

import { ref, watch } from 'vue'

const query = ref('')
watch(query, (neu, alt) => {
  console.log(`'${alt}' -> '${neu}'`)
})

watchEffect verfolgt automatisch die reaktiven Werte, die du darin verwendest, und läuft sofort einmal; für einfache Fälle ist es kürzer. Greife zu watch, wenn du genau sehen willst, welche Abhängigkeit du verfolgst, und zu watchEffect, wenn du meinst „verfolge alles, was ich nutze“.

Composables: Logik wiederverwenden

Die wahre Stärke der Composition API ist, Logik in eine Funktion auszulagern und sie über Komponenten hinweg zu teilen. Per Konvention tragen diese Funktionen ein use-Präfix.

// useCounter.js
import { ref } from 'vue'

export function useCounter(start = 0) {
  const count = ref(start)
  const increment = () => count.value++
  const reset = () => (count.value = start)
  return { count, increment, reset }
}

Jetzt kann jede Komponente dieselbe Logik mit const { count, increment } = useCounter(10) wiederverwenden. Anders als bei Mixins ist klar, woher jeder Wert kommt, und du bekommst keine Namenskonflikte.

Häufige Fragen

Soll ich ref oder reactive verwenden?

Verwende ref für Primitive und einzelnen Zustand und reactive für Objekte/Formulare, die ein logisches Ganzes bilden. Viele Teams nutzen aus Konsistenz überall ref; beides ist korrekt.

Gilt die Options API jetzt als veraltet?

Nein. Die Options API wird weiterhin vollständig unterstützt und nicht entfernt. Die Composition API ist eine zusätzliche Option, die bei großen Komponenten und geteilter Logik glänzt.

Warum schreibe ich im Template kein .value?

Wenn Vue das Template kompiliert, entpackt es refs der obersten Ebene automatisch. Deshalb schreibst du im Template count, in JavaScript aber count.value.

Du überlegst, dein Vue-Projekt auf die Composition API umzustellen? Von der Komponentenarchitektur bis zum Composable-Design können wir gemeinsam eine saubere Struktur aufbauen — nimm Kontakt auf.