Varför Composition API?
Begränsningar i Options API, problemet med att återanvända logik, fördelarna med Composition API.
Varför Composition API? är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.
De två sätten att skriva med Vue
Vue 3 ger er två sätt att skriva komponentlogik: Options API och Composition API. Båda ger samma slutresultat, men organiserar koden på mycket olika sätt.
Genom att förstå avvägningarna blir det lättare att välja rätt verktyg och läsa befintliga kodbaser med trygghet.
Så organiserar Options API koden
Options API delar upp en komponent i fasta avsnitt: data, computed, methods, watch och livscykelhakar. Varje del av en funktionalitet hamnar i ett annat avsnitt.
För en liten funktionalitet kan ni behöva ändra i fyra separata block i filen.
export default {
data() {
return { count: 0 }
},
computed: {
doubled() { return this.count * 2 }
},
methods: {
increment() { this.count++ }
}
}Problemet: ansvarsområden sprids
När en komponent växer sprids logiken för ett enda ansvarsområde (till exempel ett sökfält) över data, methods, computed och watch. Ni behöver hela tiden rulla upp och ner för att följa en enda funktionalitet.
Detta kallas fragmenteringsproblemet.
Composition API: gruppera efter funktionalitet
Composition API låter er placera all kod för ett logiskt ansvarsområde tillsammans. Reaktivt tillstånd, härledda värden och funktionerna som ändrar dem placeras bredvid varandra.
Ni läser uppifrån och ner och ser en hel funktionalitet på ett och samma ställe.
import { ref, computed } from 'vue'
export default {
setup() {
const count = ref(0)
const doubled = computed(() => count.value * 2)
function increment() { count.value++ }
return { count, doubled, increment }
}
}Sida vid sida
Lägg märke till hur det andra exemplet håller ihop count, dess härledda värde doubled och increment. I Options API låg samma tre delar i tre separata avsnitt.
- Options API: organiserat efter alternativtyp
- Composition API: organiserat efter logiskt ansvarsområde
Återanvändning av logik: mixins (det gamla sättet)
Innan Composition API var det främsta verktyget för återanvändning mixins. En mixin slår ihop sina options med en komponent.
Men mixins har verkliga problem: namnkonflikter, otydliga källor till egenskaper och implicita beroenden mellan mixins.
const counterMixin = {
data() { return { count: 0 } },
methods: { increment() { this.count++ } }
}
export default {
mixins: [counterMixin]
// Where did count come from? Not obvious.
}Återanvändning av logik: composables (det nya sättet)
En composable är helt enkelt en funktion som använder API:er för reaktivitet och returnerar reaktivt tillstånd. Den anropas som vilken funktion som helst, så källan till varje värde är tydlig.
Ingen magisk sammanslagning och inga dolda namnkonflikter.
import { ref } from 'vue'
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}Använda en composable
Genom att importera och anropa composable-funktionen blir det tydligt att count och increment kommer från useCounter. Vid destrukturering kan ni dessutom ge dem nya namn för att undvika konflikter.
import { useCounter } from './useCounter'
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}Varför composables är bättre än mixins
- Tydliga källor — varje värde kommer från ett synligt funktionsanrop.
- Inga namnkonflikter — destrukturera och byt namn fritt.
- Komponerbara — en composable kan anropa en annan.
- Bra stöd för typer — TypeScript härleder automatiskt de returnerade typerna.
Bättre TypeScript-stöd och verktyg
Eftersom Composition API bygger på vanliga funktioner och variabler kan TypeScript härleda typer utan särskilda verktyg. Det finns inget this med en handskriven typ som behöver underhållas, och kodredigerare ger korrekt autokomplettering.
När ska man använda vad
Composition API passar utmärkt för medelstora och stora komponenter samt för all logik som ska återanvändas. Options API är fortfarande helt giltigt och kan vara lättläst i små komponenter.
Ny Vue 3-kod använder i allmänhet Composition API, särskilt tillsammans med <script setup> som snart introduceras.
Snabbtest
Testa vad ni har lärt er om varför Composition API finns.
Sammanfattning
I den här lektionen har ni lärt er:
- Options API organiserar koden efter alternativtyp, vilket sprider en funktionalitet över flera avsnitt.
- Composition API grupperar kod efter logiskt ansvarsområde.
- Mixins återanvänder logik men orsakar namnkonflikter och dolda källor.
- Composables är vanliga funktioner som returnerar reaktivt tillstånd — tydliga, fria från konflikter och komponerbara.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Varför Composition API?” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Varför Composition API?”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Varför Composition API?”?
Begränsningar i Options API, problemet med att återanvända logik, fördelarna med Composition API. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Varför Composition API?”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Varför Composition API?
- Funktionen setup() och reaktiva variabler
- ref kontra reactive: när ska de användas?
- Computed och watch i Composition API