Dies sind zwei Möglichkeiten, Vue-Komponenten zu schreiben. Die Options API organisiert Code nach Optionstyp (data, methods, computed); die Composition API organisiert Code nach logischem Anliegen mit Funktionen wie , und .
Dies sind zwei Möglichkeiten, Vue-Komponenten zu schreiben. Die Options API organisiert Code nach Optionstyp (data, methods, computed); die Composition API organisiert Code nach logischem Anliegen mit Funktionen wie , und .
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Alles ist in feste Kategorien (data, methods, computed, Lifecycle) gruppiert. Einfach und auffindbar, aber die Logik eines einzelnen Features ist über diese Kategorien verteilt.
<script setup>
import { ref, computed, onMounted } from "vue";
// all the logic for "counter" lives together
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() { count.value++; }
onMounted(() => console.log("mounted"));
</script>
State, computed, Methods und Lifecycle für ein Anliegen sitzen zusammen, und <script setup> macht es prägnant (kein this, kein return).
Die Composition API ermöglicht es Ihnen, zustandsbehaftete Logik als einfache Funktionen zu extrahieren und wiederzuverwenden (Composables):
// useCounter.js — reusable across any component
export function useCounter() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
<script setup>
const { count, increment } = useCounter(); // reuse anywhere
</script>
Dies löst das Problem der Logik-Wiederverwendung elegant, was in der Options API umständlich war (Mixins hatten Benennungskollisionen und unkare Quellen).
Options API → simpler mental model, fine for small components, familiar to beginners
Composition API → better for large components, TypeScript, and reusing logic (composables)
Die Composition API (mit <script setup>) ist die empfohlene Standardwahl für neue Vue-3-Projekte, besonders mit TypeScript.
Die Composition API ist Vues Antwort auf die Organisation und Wiederverwendung von Komponenten-Logik in Version 3.
Wenn man versteht, dass sie Code nach Feature organisiert (nicht nach Optionstyp) und Composables ermöglicht — im Gegensatz zu den Optionseimern der Options API — erklärt das den modernen Vue-Stil und warum komplexe Komponenten und TypeScript-Codebases sie bevorzugen.
Beide werden vollständig unterstützt; Sie können sie sogar mischen.