Options API vs Composition API

Warum gibt es zwei APIs?

Vue 2 bot nur die Options API – ein Objekt mit festen Schlüsseln wie data, methods, computed und watch. Das ist intuitiv für kleine Komponenten, aber bei wachsender Komplexität verteilt sich zusammengehörige Logik über das gesamte Objekt. Vue 3 führte deshalb die Composition API ein: Man gruppiert Code nach Feature statt nach Option.

Dieselbe Komponente – zwei Stile

Hier ist ein einfacher Counter in beiden APIs. Achte darauf, wie sich die Struktur unterscheidet:

Options API

<template>
  <button @click="increment">{{ count }} (× {{ doubled }})</button>
</template>
<script>
export default {
  data() {
    return { count: 0 }
  },
  computed: {
    doubled() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

Composition API (script setup)

<template>
  <button @click="increment">{{ count }} (× {{ doubled }})</button>
</template>
<script setup>
import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
function increment() {
  count.value++
}
</script>

Vorteile der Composition API

Wachsende Komplexität: Der entscheidende Punkt

Bei kleinen Komponenten ist der Unterschied gering. Sobald eine Komponente aber mehrere Features verwaltet – z.B. Suche, Paginierung und Sortierung – zeigt sich die Stärke der Composition API. Statt den Code über data, computed, methods und watch zu verteilen, kann man drei saubere Composables schreiben:

<script setup>
// Jedes Feature ist ein eigenes Composable
const { query, results } = useSearch()
const { page, perPage, total } = usePagination()
const { sortBy, sortDir, toggle } = useSorting()
// Alles zusammen nutzen
const users = computed(() =>
  sortItems(results.value, sortBy.value, sortDir.value)
    .slice((page.value - 1) * perPage.value, page.value * perPage.value)
)
</script>

Wann die Options API noch in Ordnung ist

Die Options API ist nicht deprecated! Sie wird weiterhin vollständig unterstützt. In diesen Fällen ist sie eine valide Wahl:

• Kleine, einfache Komponenten – wenn die Logik in 30 Zeilen passt
• Bestehende Vue-2-Projekte – Migration schrittweise statt Big Bang
• Einsteiger im Team – die Options API hat eine flachere Lernkurve
• Prototypen – schnell etwas hinwerfen ohne viel Struktur-Overhead

Live-Demo: Composition API Counter

Migrationspfad: Schritt für Schritt

Du musst nicht alles auf einmal umschreiben. Hier ist ein pragmatischer Plan:

// ❌ Vorher: Mixin (implizit, Namenskollisionen möglich)
const SearchMixin = {
  data() {
    return { query: '', results: [] }
  },
  methods: {
    async search() {
      this.results = await api.search(this.query)
    }
  }
}
// ✅ Nachher: Composable (explizit, typsicher)
function useSearch() {
  const query = ref('')
  const results = ref([])
  async function search() {
    results.value = await api.search(query.value)
  }
  return { query, results, search }
}

Zusammenfassung