Migrering til Vue 3 Composition API for bedre komponentutvikling

Siden skaperne av Vue har annonsert at Vue 2 vil nå slutten av livet innen 31. desember 2023, oppfordres utviklere til å bytte til Vue 3.

Med denne overgangen kommer Composition API, en funksjon som tilbyr en mer modulær, deklarativ og typesikker tilnærming til å bygge Vue-applikasjoner.

Hva er Composition API?

Composition API representerer et paradigmeskifte i å skrive Vue-komponenter fra Options-objektet. Denne utviklingsstilen bruker en mer deklarativ tilnærming, slik at du kan fokusere på å bygge Vue-appen din mens du abstraherer implementeringsdetaljene.

Motivasjon for Composition API

Vue-skapere anerkjente utfordringene når de bygger komplekse webapplikasjoner med Options-objektet. Etter hvert som prosjektene vokste, ble styringen av komponentens logikk mindre skalerbar og vanskeligere å vedlikeholde, spesielt i samarbeidsmiljøer.

Den tradisjonelle Options-objekttilnærmingen resulterte ofte i mange komponentegenskaper, noe som gjorde kode utfordrende å forstå og vedlikeholde.

I tillegg ble gjenbruk av komponentlogikk på tvers av forskjellige komponenter tungvint. Den spredte logikken innenfor ulike livssykluskroker og metoder ga også kompleksitet til å forstå en komponents generelle oppførsel.

Fordeler med Composition API

Composition API gir flere fordeler i forhold til Options API.

1. Forbedret ytelse

Vue 3 introduserer en ny gjengivelsesmekanisme kalt det proxy-baserte reaktivitetssystemet. Dette systemet gir bedre ytelse ved å redusere minneforbruket og forbedre reaktiviteten. Det nye reaktivitetssystemet gjør det mulig for Vue 3 å håndtere flere gigantiske komponenttrær mer effektivt.

2. Mindre buntstørrelse

Takket være den optimaliserte kodebasen og støtte for treristing, har Vue 3 en mindre buntstørrelse enn Vue 2. Denne reduksjonen i buntstørrelse fører til raskere lastetider og forbedret ytelse.

3. Forbedret kodeorganisering

Ved å bruke 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 på tvers av forskjellige komponenter, noe som letter kodedeling og opprettelse 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 typeslutning og enklere identifikasjon av typerelaterte feil under utvikling.

Sammenligning mellom Options Object og Composition API

Nå som du forstår teorien bak Composition API, kan du begynne å bruke den i praksis. For å forstå fordelene med Composition API, la oss sammenligne noen nøkkelaspekter ved begge tilnærmingene.

Reaktive data i Vue 3

Reaktive data er et grunnleggende konsept i Vue som lar dataendringer i applikasjonen din utløse oppdateringer i brukergrensesnittet automatisk.

Vue 2 baserte sitt reaktive system på Object.defineProperty-metoden og stolte på et dataobjekt som inneholder alle de reaktive egenskapene.

Når du definerte en dataegenskap med dataalternativet i en Vue-komponent, pakket 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 du endret en egenskap.

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 lager variabler i Vue 2. Vue gjør variabler definert i dataobjektet reaktive automatisk. Endringer du gjør i en dataegenskap (antall) vil føre til en oppdatering i 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 tellevariabelens verdi med 1.

Når du skriver funksjoner som metoder i Vue 2, måtte du også bruke dette nøkkelordet (this.count++). Dette nøkkelordet lar deg peke på variabler i dataobjektet. Å utelate dette nøkkelordet vil gi 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 ref eller reaktive funksjoner for å definere reaktive data i Vue 3. Ref-funksjonen lager en enkelt reaktiv referanse til en verdi, mens den reaktive funksjonen lager 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 lager reaktive referanser til variabler.

Kodeblokkeksemplet lager tellevariabelen med ref()-funksjonen og setter startverdien til 0. ref()-funksjonen returnerer et objekt med en verdi-egenskap. Denne verdiegenskapen inneholder den faktiske verdien av tellingen.

@click-direktivet brukes til å håndtere klikkhendelser i Vue.

Du definerer funksjoner som trengs i komponenten din i skriptoppsettblokken. Vue 3 erstattet metodesyntaksen 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 verdimetode til variabelnavnet. For eksempel bruker kodeblokken count.value for å referere til verdien av tellevariabelen.

Den beregnede funksjonen i Vue 3

Den beregnede funksjonen er en annen Vue-funksjon som lar deg definere utledede verdier basert på reaktive data. Beregnet egenskaper oppdateres automatisk når avhengighetene deres endres, noe som sikrer at den utledede verdien alltid er oppdatert.

I Vue 2 definerer du den beregnede oppførselen med det beregnede 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 ovenfor avhenger den beregnede egenskapen doubleCount av egenskapen count data. Hver gang count-egenskapen endres, beregner Vue doubleCount-egenskapen på nytt.

I Vue 3 introduserer Composition API en ny måte å definere beregnede egenskaper ved å bruke den beregnede 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 beregnede funksjonen fra vue-pakken før du kan bruke funksjonen.

Du definerte en doubleCount-beregnet ref i kodeblokken ovenfor med den beregnede funksjonen. Vue 3 refererer til beregnede egenskaper som beregnede refs, og fremhever deres avhengighet av reaktive variabler.

Den beregnede funksjonen tar en getter-funksjon som et argument, som beregner den utledede verdien basert på de reaktive dataene. I dette tilfellet returnerer den beregnede doubleCount-referen multiplikasjonen av den reaktive tellevariabelen 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 tilnærming til organisering og gjenbruk av kode i Vue-komponenter. Du kan bygge mer modulære og vedlikeholdbare Vue-applikasjoner med Composition API.

Vue tilbyr også ekstra funksjoner for å maksimere produktiviteten mens du utvikler nettapper. Du kan lære å lage tilpassede direktiver for å gjenbruke visse funksjoner på tvers av ulike deler av Vue-applikasjonen din.