Dette er to måder at skrive Vue-komponenter på. Options API organiserer kode efter optionstype (data, methods, computed); Composition API organiserer kode efter logisk bekymring ved hjælp af funktioner som , og .
Dette er to måder at skrive Vue-komponenter på. Options API organiserer kode efter optionstype (data, methods, computed); Composition API organiserer kode efter logisk bekymring ved hjælp af funktioner som , og .
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Alt er grupperet i faste balde (data, methods, computed, lifecycle). Enkelt og let at finde, men en enkelt funktionalitets logik bliver spredt ud over disse balde.
<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 og lifecycle for en bekymring sidder sammen, og <script setup> gør det præcist (ingen this, ingen return).
Composition API lader dig udtrække og genbruge stavefuldstændig logik som plain funktioner (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>
Dette løser elegant logik-genbrug, som var besværligt i Options API (mixins havde navnekollusioner og uklare kilder).
Options API → simpler mental model, fine for small components, familiar to beginners
Composition API → better for large components, TypeScript, and reusing logic (composables)
Composition API (med <script setup>) er det anbefalede standard for nye Vue 3-projekter, især med TypeScript.
Composition API er Vue 3's svar på organisation og genbrug af komponentlogik.
At forstå, at den grupperer kode efter funktionalitet (ikke efter optionstype) og aktiverer composables — i modsætning til Options API's option-baserede balde — forklarer den moderne Vue-stil og hvorfor komplekse komponenter og TypeScript-codebaser foretrækker den.
Begge er fuldt understøttet; du kan endda blande dem.