Skaparna bakom Vue har meddelat att supporten för Vue 2 upphör den 31 december 2023. Därför rekommenderas alla utvecklare att migrera till Vue 3.
Denna övergång innebär att man börjar använda Composition API, en funktion som ger ett mer modulärt, deklarativt och typsäkert sätt att bygga Vue-applikationer.
Vad innebär Composition API?
Composition API markerar ett skifte i hur man skriver Vue-komponenter, bort från det traditionella Options-objektet. Denna nya metod fokuserar på ett mer deklarativt arbetssätt, vilket gör att du kan koncentrera dig på att bygga din Vue-applikation samtidigt som du slipper hantera underliggande implementationsdetaljer.
Motivering till Composition API
Vue-utvecklarna insåg de utmaningar som uppstod när man byggde komplexa webbapplikationer med det tidigare Options-objektet. Allt eftersom projekten växte, blev komponentlogiken svårare att hantera och underhålla, speciellt i teammiljöer.
Den klassiska Options-metoden resulterade ofta i att komponenterna blev överbelastade med egenskaper, vilket gjorde koden svår att förstå och underhålla.
Dessutom var det inte enkelt att återanvända komponentlogik mellan olika komponenter. Logiken spreds ut över olika livscykelkrokar och metoder, vilket gjorde det svårt att få en överblick över en komponents totala beteende.
Fördelar med Composition API
Composition API erbjuder flera betydande fördelar jämfört med det äldre Options API.
1. Förbättrad prestanda
Vue 3 har en ny renderingsmekanism, det proxybaserade reaktivitetssystemet. Detta system ökar prestandan genom att minska minnesanvändningen och förbättra reaktiviteten. Det nya systemet gör det möjligt för Vue 3 att hantera stora komponentträd mer effektivt.
2. Mindre paketstorlek
Tack vare en optimerad kodbas och stöd för trädskakning har Vue 3 en mindre paketstorlek än Vue 2. Detta leder till snabbare laddningstider och förbättrad prestanda.
3. Förbättrad kodorganisation
Genom att använda Composition API kan du strukturera din komponents kod i mindre, återanvändbara funktioner. Detta gör koden mer överskådlig och lättare att underhålla, särskilt för stora och komplexa komponenter.
4. Återanvändning av komponenter och funktioner
Kompositionsfunktioner kan enkelt återanvändas i olika komponenter, vilket underlättar koddelning och skapandet av ett bibliotek med återanvändbara komponenter.
5. Bättre stöd för TypeScript
Composition API har ett mer omfattande stöd för TypeScript, vilket ger mer exakt typkontroll och gör det lättare att upptäcka fel i koden under utveckling.
Jämförelse mellan Options Object och Composition API
Nu när du har en grundläggande förståelse för Composition API, kan vi titta på hur den kan användas i praktiken. För att tydliggöra fördelarna, ska vi jämföra några viktiga aspekter av de båda metoderna.
Reaktiva data i Vue 3
Reaktiva data är en central del av Vue. De gör det möjligt för dataändringar i din applikation att automatiskt uppdatera användargränssnittet.
Vue 2 använde Object.defineProperty-metoden för sitt reaktiva system. Systemet förlitade sig på ett dataobjekt som innehöll alla reaktiva egenskaper.
När du definierade en dataegenskap med data-alternativet i en Vue-komponent, svepte Vue automatiskt varje egenskap i dataobjektet med getters och setters, en ny ES6-funktion.
Dessa getters och setters spårade beroenden mellan egenskaper och uppdaterade användargränssnittet när någon egenskap ändrades.
Här är ett exempel på hur man skapar reaktiva data i Vue 2 med Options-objektet:
<template>
<div>
<p>Räkning: {{ count }}</p>
<button @click="increment">Öka</button>
</div>
</template><script>
export default {
data() {
return {
count: 0,
};
},methods: {
increment() {
this.count++;
},
},
};
</script>
Detta kodblock visar hur man deklarerar variabler i Vue 2. Vue gör automatiskt alla variabler i data-objektet reaktiva. Varje ändring du gör i en dataegenskap (count) leder till en uppdatering i applikationens gränssnitt.
Dessutom användes methods-objektet för att definiera JavaScript-funktioner som används inom komponenten. I det här exemplet definierar kodavsnittet metoden increment() som ökar värdet på räknevariabeln med 1.
När du skapade funktioner (metoder) i Vue 2, var du tvungen att använda nyckelordet ”this” (this.count++). Detta nyckelord pekar på variabler i data-objektet. Om du inte använde ”this”, fick du ett felmeddelande när Vue monterade komponenten.
Vue 3:s proxybaserade reaktivitetssystem använder JavaScript-proxy för att uppnå reaktivitet, vilket ger avsevärda prestandaförbättringar och bättre hantering av beroenden.
Du använder ref eller reactive-funktionerna för att definiera reaktiva data i Vue 3. Funktionen ref skapar en enskild reaktiv referens till ett värde, medan den reaktiva funktionen skapar ett reaktivt objekt som innehåller flera egenskaper.
Här är ett exempel på hur du skapar reaktiva data med ref-funktionen i Vue 3:
<script setup>
import { ref } from 'vue';const count = ref(0);
function increment() {
count.value++;
}
</script><template>
<div>
<p>Räkning: {{ count }}</p>
<button @click="increment">Öka</button>
</div>
</template>
För att använda ref()-funktionen i Vue 3 måste du först importera den från vue-paketet. Funktionen ref() skapar reaktiva referenser till variabler.
Kodexemplet skapar variabeln ”count” med ref()-funktionen och sätter det initiala värdet till 0. ref()-funktionen returnerar ett objekt med en value-egenskap. Denna egenskap innehåller det faktiska värdet på räkningen.
Direktivet ”@click” används för att hantera klickhändelser i Vue.
Du definierar de funktioner som behövs i komponenten i script setup-blocket. Vue 3 ersatte syntaxen med metoder från Vue 2 med vanliga JavaScript-funktioner.
Du kan nu komma åt de reaktiva variablerna du definierat med ref()-funktionen genom att lägga till value-metoden till variabelnamnet. Kodblocket använder till exempel count.value för att referera till värdet på count-variabeln.
Den beräknade funktionen i Vue 3
Den beräknade funktionen är en annan Vue-funktion som gör det möjligt att definiera värden som är härledda från reaktiva data. Beräknade egenskaper uppdateras automatiskt när deras beroenden ändras, vilket garanterar att det härledda värdet alltid är aktuellt.
I Vue 2 definierade du det beräknade beteendet med alternativet ”computed” inom en komponent. Här är ett exempel:
<template>
<div>
<p>Räkning: {{ count }}</p>
<p>Dubbel Räkning: {{ doubleCount }}</p>
<button @click="incrementCount">Öka Räkning</button>
</div>
</template><script>
export default {
data() {
return {
count: 0
};
},
computed: {
doubleCount() {
return this.count * 2;
}
},
methods: {
incrementCount() {
this.count++;
}
}
};
</script>
I exemplet ovan beror den beräknade egenskapen ”doubleCount” på egenskapen ”count” i data. När count-egenskapen ändras, beräknar Vue om doubleCount-egenskapen.
I Vue 3 introducerar Composition API ett nytt sätt att definiera beräknade egenskaper med hjälp av funktionen computed. Så här ser det ut:
<script setup>
import { ref, computed } from 'vue';const count = ref(0);
const doubleCount = computed(() => count.value * 2);const incrementCount = () => {
count.value++;
};
</script><template>
<div>
<p>Räkning: {{ count }}</p>
<p>Dubbel Räkning: {{ doubleCount }}</p>
<button @click="incrementCount">Öka Räkning</button>
</div>
</template>
Du måste importera den beräknade funktionen från vue-paketet innan du kan använda den.
I kodblocket ovan definierades en beräknad referens, ”doubleCount”, med den beräknade funktionen. Vue 3 refererar till beräknade egenskaper som beräknade referenser (computed refs) för att betona deras beroende av reaktiva variabler.
Den beräknade funktionen tar en getter-funktion som argument. Denna getter-funktion beräknar det härledda värdet baserat på de reaktiva data. I det här fallet returnerar den beräknade doubleCount-referensen produkten av den reaktiva variabeln ”count” multiplicerat med 2.
Lägg märke till att kodblocken som baseras på Composition API är mer lättlästa och koncisa än de som är skrivna med Options-objektet.
Lär dig skapa egna direktiv i Vue
Vue 3 Composition API är ett kraftfullt och flexibelt sätt att organisera och återanvända kod i Vue-komponenter. Med Composition API kan du bygga mer modulära och lättunderhållna Vue-applikationer.
Vue erbjuder även andra funktioner som kan maximera produktiviteten vid utveckling av webbapplikationer. Du kan till exempel lära dig att skapa anpassade direktiv för att återanvända viss funktionalitet i olika delar av din Vue-applikation.