Dette er to måter å skrive Vue-komponenter på. Options API organiserer kode etter opsjontype (data, methods, computed); Composition API organiserer kode etter logisk concern ved hjelp av funksjoner som ref, og .
Dette er to måter å skrive Vue-komponenter på. Options API organiserer kode etter opsjontype (data, methods, computed); Composition API organiserer kode etter logisk concern ved hjelp av funksjoner som ref, og .
computedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Alt er gruppert i faste kategorier (data, methods, computed, lifecycle). Enkelt og lett å finne, men en enkelt features logikk blir spredt utover disse kategoriene.
<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 ett concern sitter sammen, og <script setup> gjør det konsist (ingen this, ingen return).
Composition API lar deg trekke ut og gjenbruke stateful logikk som vanlige funksjoner (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 logikkgjenbruk på en ren måte, noe som var ubekvemt i Options API (mixins hadde navnekollisioner 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 den anbefalte standarden for nye Vue 3-prosjekter, spesielt med TypeScript.
Composition API er Vue 3s svar på organisering og gjenbruk av komponentlogikk.
Å forstå at den grupperer kode etter feature (ikke etter opsjontype) og muliggjør composables — versus Options APIs opsjonbaserte kategorier — forklarer den moderne Vue-stilen og hvorfor komplekse komponenter og TypeScript-kodebaser foretrekker den.
Begge er fullt støttet; du kan til og med blande dem.