Was ist die Vue Composition API und wo liegt der Unterschied zur Options API?

Was ist die Composition API?

Die Composition API wurde mit Vue 3 eingeführt, um Entwicklern mehr Flexibilität und eine bessere logische Strukturierung des Codes zu ermöglichen. Anstelle der Aufteilung von Code nach Optionen (wie data, methods, computed usw.), ermöglicht die Composition API, logische Einheiten unabhängig von diesen Optionen zu organisieren.

Wann sollte die Composition API verwendet werden?

• Wiederverwendbarkeit: Wenn Logik in verschiedene Komponenten extrahiert und wiederverwendet werden soll.
• Komplexe Komponenten: Wenn eine Komponente viele Funktionen und reaktive Daten hat, kann die Composition API dabei helfen, den Code besser zu strukturieren.
• TypeScript: Die Composition API harmoniert gut mit TypeScript und bietet bessere Typsicherheit.

Vorteile gegenüber der Options API

• Bessere Logikorganisation: Verwandte Logik kann zusammen gruppiert werden, was den Code modularer und einfacher wartbar macht.
• Mehr Flexibilität: Die API ist flexibler und erlaubt es, Funktionen außerhalb von Vue-Komponenten zu definieren.
• TypeScript-Unterstützung: Bessere Unterstützung und Integration von TypeScript.

Vergleich mit der Options API

Struktur und Syntax

Die Options API ordnet Code nach Optionen (z.B. data, methods, computed). Dies ist einfach zu verstehen, kann aber bei komplexen Komponenten unübersichtlich werden.

Die Composition API hingegen gruppiert zusammengehörige Logik in setup-Funktionen und kann auch in externe Funktionen ausgelagert werden.

Beispiel mit der Options API

<script>
export default {
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    increment() {
      this.counter++;
    }
  },
  computed: {
    doubleCounter() {
      return this.counter * 2;
    }
  }
};
</script>

Beispiel mit der Composition API

<script lang="ts" setup>
import { ref, computed } from 'vue';

const counter = ref(0);

function increment() {
  counter.value++;
}

const doubleCounter = computed(() => counter.value * 2);
</script>

Unterschiede in der Herangehensweise

In der Options API sind Methoden, Daten und berechnete Eigenschaften nach ihrer Funktion getrennt. In der Composition API hingegen wird die Logik zusammengefasst, was zu einer besseren Übersicht und Modularität führt, insbesondere bei größeren Komponenten.

Praktische Beispiele

Beispiel mit der Options API

<script>
export default {
  data() {
    return {
      message: "Hello, world!",
      count: 0
    };
  },
  methods: {
    incrementCount() {
      this.count++;
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
};
</script>

Beispiel mit der Composition API

<script lang="ts" setup>
import { ref, computed } from 'vue';

const message = ref("Hello, world!");
const count = ref(0);

function incrementCount() {
  count.value++;
}

const reversedMessage = computed(() => message.value.split('').reverse().join(''));
</script>

Vergleich der Beispiele

Im Beispiel mit der Options API sind data, methods und computed klar voneinander getrennt. In der Composition API ist die Logik für den Zähler und die Nachricht innerhalb des setup-Blocks, was eine bessere Übersicht und einfachere Wiederverwendbarkeit von Logik ermöglicht.

Wann sollte man welche API verwenden?

Composition API

• Vorteilhaft bei komplexeren Projekten: Wenn viele logische Einheiten zu managen sind.
• Wiederverwendbare Funktionen: Bei wiederverwendbaren Funktionen und besserer Modularität der Codebasis.
• TypeScript: Für Entwickler, die stark auf TypeScript setzen, bietet die Composition API eine verbesserte Typunterstützung.

Options API

• Einfachere Projekte: Für einfache Projekte oder kleinere Komponenten ist die Options API immer noch eine solide Wahl.
• Bestehende Projekte: In bestehenden Projekten, die komplett auf der Options API basieren, kann es sinnvoller sein, bei dieser zu bleiben.