Dessa är två sätt att skriva Vue-komponenter. Options API organiserar kod efter alternativtyp (data, methods, computed); Composition API organiserar kod efter logiska behov med hjälp av funktioner som ref, och .
computedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Allt är grupperat i fasta kategorier (data, methods, computed, lifecycle). Enkelt och lätt att hitta, men en features logik blir spridd över dessa kategorier.
<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>
Tillstånd, computed, metoder och lifecycle för en concern sitter tillsammans, och <script setup> gör det koncist (ingen this, ingen return).
Composition API låter dig extrahera och återanvända tillståndslogik som vanliga 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>
Detta löser elegantly logikåteranvändning, vilket var krångligt i Options API (mixins hade namnkollisioner och oklara källor).
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>) är det rekommenderade standardvalet för nya Vue 3-projekt, särskilt med TypeScript.
Composition API är Vue 3:s svar på att organisera och återanvända komponentlogik.
Att förstå att den grupperar kod efter feature (inte efter alternativtyp) och möjliggör composables — jämfört med Options API:s alternativbaserade kategorier — förklarar den moderna Vue-stilen och varför komplexa komponenter och TypeScript-kodbaser föredrar den.
Båda stöds fullt ut; du kan till och med blanda dem.
Ett bibliotek med IT-intervjufrågor och detaljerade svar — från Junior till Senior.
Donera