Utviklere oppfordres nå til å migrere til Vue 3, da skaperne av Vue har kunngjort at støtten for Vue 2 vil opphøre 31. desember 2023.
Denne overgangen introduserer Composition API, en funksjonalitet som gir en mer modulær, deklarativ og type-sikker måte å utvikle Vue-applikasjoner på.
Hva er Composition API?
Composition API markerer et skifte i måten Vue-komponenter skrives på, fra å bruke Options-objektet. Denne nye utviklingsmetoden er mer deklarativ, slik at du kan fokusere på å bygge appen din mens implementasjonsdetaljer blir abstrahert.
Bakgrunnen for Composition API
Skaperne av Vue forsto utfordringene som oppstod ved å bygge komplekse webapplikasjoner med Options-objektet. Etter hvert som prosjektene vokste, ble håndteringen av komponentlogikken mindre skalerbar og vanskeligere å vedlikeholde, spesielt i samarbeidende miljøer.
Den tradisjonelle Options-objekt-tilnærmingen førte ofte til mange komponentegenskaper, noe som gjorde koden vanskeligere å forstå og vedlikeholde.
Gjenbruk av komponentlogikk på tvers av ulike komponenter var også tungvint. Den spredte logikken innenfor forskjellige livssyklushooks og metoder bidro også til kompleksiteten i å forstå en komponents generelle oppførsel.
Fordeler med Composition API
Composition API gir flere fordeler sammenlignet med Options API.
1. Forbedret ytelse
Vue 3 introduserer en ny gjengivelsesmekanisme, det proxy-baserte reaktivitetssystemet. Dette systemet gir bedre ytelse ved å redusere minnebruk og forbedre reaktiviteten. Det nye reaktivitetssystemet gjør det mulig for Vue 3 å håndtere større komponenttrær mer effektivt.
2. Mindre pakkestørrelse
Takket være en optimalisert kodebase og støtte for treristing, har Vue 3 en mindre pakkestørrelse enn Vue 2. Denne reduksjonen fører til raskere innlastningstider og forbedret ytelse.
3. Forbedret kodeorganisering
Med Composition API kan du organisere komponentens kode i mindre, gjenbrukbare funksjoner. Dette fremmer bedre forståelse og vedlikehold, spesielt for store og komplekse komponenter.
4. Gjenbrukbarhet av komponenter og funksjoner
Komposisjonsfunksjoner kan enkelt gjenbrukes i ulike komponenter, noe som forenkler kodedeling og etablering av et bibliotek med gjenbrukbare funksjoner.
5. Bedre TypeScript-støtte
Composition API gir mer omfattende TypeScript-støtte, noe som muliggjør mer nøyaktig typeinferens og enklere identifikasjon av typefeil under utvikling.
Sammenligning mellom Options Object og Composition API
Nå som du har en grunnleggende forståelse av Composition API, kan du begynne å utforske det i praksis. For å tydeliggjøre fordelene med Composition API, la oss sammenligne noen nøkkelaspekter ved begge tilnærmingene.
Reaktive data i Vue 3
Reaktive data er et sentralt konsept i Vue, som gjør at dataendringer i applikasjonen din automatisk utløser oppdateringer i brukergrensesnittet.
Vue 2 baserte sitt reaktive system på Object.defineProperty-metoden og var avhengig av et dataobjekt som inneholdt alle de reaktive egenskapene.
Når du definerte en dataegenskap med dataalternativet i en Vue-komponent, omsluttet Vue automatisk hver egenskap i dataobjektet med gettere og settere, en ny ECMA Script-funksjon (ES6).
Disse getterne og setterne sporet avhengigheter mellom egenskaper og oppdaterte brukergrensesnittet når en egenskap ble endret.
Her er et eksempel på hvordan du lager reaktive data i Vue 2 med Options-objektet:
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
};
</script>
Kodeblokken viser hvordan man oppretter variabler i Vue 2. Vue gjør automatisk variabler definert i dataobjektet reaktive. Endringer i en dataegenskap (antall) vil føre til en oppdatering av applikasjonens brukergrensesnitt.
I tillegg brukte du methods-objektet til å definere JavaScript-funksjoner som brukes i komponenten. I dette eksemplet definerer kodebiten increment()-metoden, som øker verdien av tellervariabelen med 1.
Når du skrev funksjoner som metoder i Vue 2, måtte du også bruke nøkkelordet «this» (this.count++). Dette nøkkelordet lar deg referere til variabler i dataobjektet. Å utelate dette nøkkelordet vil føre til en feil når Vue monterer komponenten.
Vue 3s proxy-baserte reaktivitetssystem bruker JavaScript-proxyer for å oppnå reaktivitet, noe som gir betydelige ytelsesforbedringer og bedre håndtering av reaktive avhengigheter.
Du bruker enten `ref` eller `reactive` funksjoner for å definere reaktive data i Vue 3. `ref`-funksjonen skaper en enkelt reaktiv referanse til en verdi, mens `reactive`-funksjonen skaper et reaktivt objekt som inneholder flere egenskaper.
Her er et eksempel på hvordan du lager reaktive data med `ref`-funksjonen i Vue 3:
<script setup>
import { ref } from 'vue';
const count = ref(0);
function increment() {
count.value++;
}
</script>
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
For å bruke `ref()`-funksjonen i Vue 3, må du først importere den fra `vue`-pakken. `ref()`-funksjonen skaper reaktive referanser til variabler.
Eksemplet lager tellervariabelen med `ref()`-funksjonen og setter startverdien til 0. `ref()`-funksjonen returnerer et objekt med en `value`-egenskap. Denne `value`-egenskapen inneholder den faktiske verdien av tellingen.
`@click`-direktivet brukes til å håndtere klikkhendelser i Vue.
Du definerer funksjonene som trengs i komponenten din i script setup-blokken. Vue 3 erstattet metode-syntaksen for å definere funksjoner i Vue 2 med vanlige JavaScript-funksjoner.
Du kan nå få tilgang til de reaktive variablene du definerte med `ref()`-funksjonen ved å knytte en `value`-metode til variabelnavnet. For eksempel bruker kodeblokken `count.value` for å referere til verdien av tellervariabelen.
Den beregnede funksjonen i Vue 3
Den `computed`-funksjonen er en annen Vue-funksjon som lar deg definere avledede verdier basert på reaktive data. Beregnede egenskaper oppdateres automatisk når avhengighetene deres endres, og sørger for at den avledede verdien alltid er oppdatert.
I Vue 2 definerer du den beregnede oppførselen med det `computed`-alternativet i en komponent. Her er et eksempel:
<template>
<div>
<p>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
<button @click="incrementCount">Increment Count</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
},
computed: {
doubleCount() {
return this.count * 2;
}
},
methods: {
incrementCount() {
this.count++;
}
}
};
</script>
I eksemplet over er den beregnede egenskapen `doubleCount` avhengig av dataegenskapen `count`. Hver gang `count`-egenskapen endres, beregner Vue `doubleCount`-egenskapen på nytt.
I Vue 3 introduserer Composition API en ny måte å definere beregnede egenskaper på ved hjelp av den `computed`-funksjonen. Slik 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>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
<button @click="incrementCount">Increment Count</button>
</div>
</template>
Du må importere den `computed`-funksjonen fra `vue`-pakken før du kan bruke den.
Du definerte en `doubleCount` beregnet `ref` i kodeblokken ovenfor ved hjelp av den `computed`-funksjonen. Vue 3 omtaler beregnede egenskaper som beregnede `refs`, noe som understreker deres avhengighet av reaktive variabler.
Den `computed`-funksjonen tar en getter-funksjon som argument, som beregner den avledede verdien basert på de reaktive dataene. I dette tilfellet returnerer den beregnede `doubleCount`-referansen multiplikasjonen av den reaktive tellervariabelen med 2.
Legg merke til at kodeblokker basert på Composition API er mer lesbare og konsise enn de som er skrevet med Options-objektet.
Lær å lage tilpassede direktiver i Vue
Vue 3 Composition API presenterer en kraftig og fleksibel måte å organisere og gjenbruke kode i Vue-komponenter. Med Composition API kan du bygge mer modulære og vedlikeholdbare Vue-applikasjoner.
Vue tilbyr også tilleggsfunksjoner for å maksimere produktiviteten når du utvikler nettapper. Du kan lære å lage tilpassede direktiver for å gjenbruke visse funksjoner i forskjellige deler av Vue-applikasjonen din.