Migrera till Vue 3 Composition API för bättre komponentutveckling

Eftersom skaparna av Vue har meddelat att Vue 2 kommer att nå slutet av sin livslängd den 31 december 2023, uppmuntras utvecklare att byta till Vue 3.

I och med denna utveckling introduceras Composite Application Platform Interface, som är en mer strömlinjeformad, explicit och typsäker metod för att bygga Vue-projekt genom dess modulära och deklarativa designprinciper.

Vad är Composition API?

Framväxten av Composition API innebär ett betydande avsteg från den konventionella metod som används för att skapa Vue-komponenter med hjälp av Options-objektet. Att anamma denna progressiva teknik ligger i linje med ett alltmer självsäkert och deklarativt tankesätt som betonar att man koncentrerar sig på att konstruera en Vue-applikation utan att tyngas av invecklade implementeringsdetaljer.

Motivering för Composition API

Utvecklarna av Vue identifierade svårigheterna med att använda Options-objektet för att bygga komplicerade webbapplikationer när projektstorleken ökade. Hanteringen av en komponents logik blev mindre genomförbar i stor skala och svårare att upprätthålla i samarbetsmiljöer.

Den konventionella implementeringen av Options-objektet ledde ofta till ett överflöd av komponentattribut, vilket gjorde koden svår att förstå och hantera på grund av dess komplexitet.

Dessutom visade det sig vara otympligt att använda delad logik bland olika komponenter. Dessutom försvårade den spridda logiken i flera livscykelkrokar och metoder ytterligare förståelsen av en enskild komponents övergripande beteende.

Fördelar med Composition API

Användningen av Composition API ger en mängd fördelar jämfört med Options API, vilket förbättrar den övergripande funktionaliteten och användarupplevelsen.

Förbättrad prestanda

Vue 3 har introducerat en innovativ renderingsmetod som kallas Proxy-based Reactivity System, som är utformad för att förbättra både prestanda och reaktiva funktioner. Genom att minimera minnesanvändningen och optimera reaktiviteten gör det nya systemet det möjligt att hantera omfattande komponenthierarkier på ett mer effektivt sätt.

Mindre paketstorlek

Tack vare den strömlinjeformade arkitekturen och den effektiva resursallokeringen som Vue 3:s optimerade kodbas och tree-shaking-funktioner ger, är paketet mer kompakt jämfört med föregångaren, vilket ger snabbare laddningstider och bättre övergripande prestanda.

Förbättrad kodorganisation

Genom att använda funktionerna i Composition API är det möjligt att dela upp en komponents källkod i mer hanterbara, modulära enheter genom implementering av mindre, återanvändbara funktioner. Ett sådant tillvägagångssätt förbättrar inte bara förståelsen och underlättar löpande underhåll, utan fungerar också som en värdefull strategi för att ta itu med de utmaningar som komplicerade och omfattande komponenter utgör.

Återanvändbarhet av komponenter och funktioner

Användningen av kompositionsfunktioner möjliggör sömlös integrering och återanvändning av kod inom olika komponenter, vilket resulterar i ett effektivt bibliotek med delade funktioner.

Bättre TypeScript-stöd

Införandet av Composition API har avsevärt förbättrat TypeScript-stödet i Visual Studio Code, vilket har lett till en högre grad av noggrannhet när det gäller typinferens, samt en ökad förmåga att upptäcka och hantera typografiska avvikelser under utvecklingsprocessen.

Jämförelse mellan Options Object och Composition API

Med tanke på din kännedom om de teoretiska grunderna för Reacts Composition API är du nu beredd att tillämpa denna kunskap i praktiska sammanhang. En jämförelse mellan de fördelar som Composition API erbjuder och de som klasskomponenter erbjuder kommer att hjälpa till att belysa dess värdeförslag.

Reaktiv data i Vue 3

Reaktiv data är en viktig princip i Vue, som möjliggör sömlös interaktion mellan dataförändringar och motsvarande uppdateringar i användargränssnittet utan att det krävs uttryckliga åtgärder eller omladdning av sidor. Denna automatiska synkronisering säkerställer en effektiv och responsiv upplevelse för användarna.

Vue 2 använde metoden Object.defineProperty som grund för sitt reaktiva system, där systemet byggde på ett dataobjekt som omfattade alla reaktiva egenskaper i en applikation.

Användningen av alternativet data i en Vue-komponent möjliggör automatisk implementering av ES6-kompatibla getter- och setter-metoder kring varje egenskap i objektet data .

De ovan nämnda getter- och setter-metoderna övervakade ömsesidiga beroenden mellan attribut och justerade användargränssnittet dynamiskt som svar på ändringar som gjordes i något av dessa attribut.

På ett mer raffinerat sätt visas här en illustration som visar generering av responsiva data i Vue 2 med hjälp av objektet Options:

 <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>

I detta exempel visar vi hur man skapar föränderliga variabler inom ramen för Vue.js. Så snart en variabel definieras i objektet data blir den mottaglig för ändringar och uppdateringar, vilket i sin tur leder till ändringar i användargränssnittet för den tillhörande applikationen.

Dessutom använde du objektet methods för att implementera JavaScript-funktioner som används i komponenten. I det här fallet visar kodblocket funktionen increment() , som ökar värdet på variabeln count med ett.

För att kunna använda funktioner som metoder i en Vue 2-applikation är det viktigt att använda nyckelordet “this” tillsammans med funktionsanropet och dess associerade variabel(er). Detta beror på att nyckelordet “this” används för att referera till det relevanta dataobjektets variabler. Om nyckelordet “this” inte inkluderas när komponenten renderas kommer Vue att generera ett fel under monteringsprocessen.

Vue 3 har implementerat ett proxybaserat reaktivitetssystem som utnyttjar kraften i JavaScript-proxies för att förbättra funktionaliteten. Detta nya tillvägagångssätt ger betydande prestandafördelar samt förbättrad hantering av reaktiva beroenden, vilket resulterar i en övergripande mer effektiv utvecklingsupplevelse.

Vue tillhandahåller två typer av funktioner för att definiera reaktiva data - funktionen ref och funktionen reactive . Den förstnämnda skapar en enskild reaktiv referens till ett visst värde, medan den sistnämnda konstruerar en hel reaktiv struktur med flera egenskaper.

I det här fallet ska vi illustrera processen för att generera responsiva data med hjälp av funktionen ref inom ramen för 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>

För att kunna använda funktionen ref() inom ramen för Vue 3 måste man först importera den från Vue-paketet. Denna funktion används för att skapa reaktiva referenser till olika variabler.

Den medföljande JavaScript-koden använder funktionen ref() för att skapa en referens till variabeln count och sätter dess initiala värde till “0”. Därefter tilldelas det returnerade objektet från funktionen ref() till variabeln count .Objektet innehåller en enda egenskap med namnet value , som fungerar som en föränderlig lagring för det aktuella tillståndet för variabeln count .

Direktivet @click används i Vue-ramverket för att hantera och svara på klickhändelser som inträffar i en komponents renderade gränssnitt. Denna mekanism för händelsebindning möjliggör anpassad hantering av användarinteraktioner, vilket gör det möjligt för utvecklare att införliva dynamisk funktionalitet eller utlösa specifika åtgärder vid detektering av en klickhändelse.

I Vue 3 har metodsyntaxen för att definiera funktioner i komponenter ersatts av JavaScript-standardfunktioner. Dessa funktioner definieras i setup -blocket i komponentens skript.

Man kan nu utnyttja de reaktiva egenskaper som skapas genom att använda ref()-funktionen genom att associera en metod som returnerar ett värde med den angivna identifieraren. Som en illustration använder det medföljande kodexemplet syntaxen “count.value” för att anspela på det aktuella tillståndet för den reaktiva egenskapen “count”.

Beräkningsfunktionen i Vue 3

Beräkningsfunktionen är ett värdefullt verktyg i Vues arsenal som gör det möjligt att skapa beräknade värden som härrör från reaktiva data. Denna automatiska uppdateringsprocess sker varje gång ett beroende ändras, vilket garanterar att den resulterande beräkningen alltid är aktuell och korrekt.

I Vue 2 definierar man det beräknade beteendet för en komponent genom att använda alternativet “computed” i komponenten. Ett exempel på illustration finns nedan:

 <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 ovan nämnda illustration är den beräknade egenskapen doubleCount beroende av dataegenskapen count . Om egenskapen count genomgår några förändringar kommer Vue att omvärdera egenskapen doubleCount i enlighet med detta.

I Vue 3 innebär introduktionen av Composition API ett nytt sätt att definiera beräknade egenskaper genom att använda funktionen computed . Syntaxen för denna implementering är som följer:

 <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>

För att kunna använda den beräknade funktionen från Vue-paketet är det viktigt att man först importerar funktionen till sin kodbas.

I det medföljande kodavsnittet har vi skapat en beräknad egenskap med namnet “doubleCount” med hjälp av en beräkningsbar funktion. Denna nomenklatur betonar beroendet av beräknade egenskaper på reaktiva datakällor, vilket är en framträdande egenskap hos Vue 3:s ramverk.

Den tillhandahållna implementeringen definierar en beräkningsfunktion som accepterar en getter-funktion som indata, där den senare är ansvarig för att härleda ett värde från de reaktiva data. I det här fallet returnerar den beräknade reflektionen doubleCount produkten av den reaktiva variabeln count multiplicerad med två.

Det är värt att notera att kodblock som skapas med hjälp av Composition API tenderar att vara mer lättlästa och kortfattade jämfört med deras motsvarigheter som konstrueras med hjälp av Options-objektet.

Lär dig skapa anpassade direktiv i Vue

Composition API i Vue 3 erbjuder en robust och mångsidig metod för att strukturera och återanvända kod inom komponentmallar, så att utvecklare kan skapa mer strömlinjeformade och hanterbara Vue-program genom ökad modularitet och underhållsmässighet.

Vue erbjuder ytterligare funktioner som gör det enklare att skapa webbapplikationer. Man kan förvärva kunskap om hur man utvecklar skräddarsydda direktiv, vilket gör det möjligt att använda specifika funktioner i olika delar av ett Vue-projekt.