Migreren naar de Vue 3 Composition API voor betere componentontwikkeling
Aangezien de makers van Vue hebben aangekondigd dat Vue 2 op 31 december 2023 het einde van zijn levensduur zal bereiken, worden ontwikkelaars aangemoedigd om over te stappen op Vue 3.
De introductie van deze evolutie brengt de Composite Application Platform Interface voort, die een meer gestroomlijnde, expliciete en type-veilige methode biedt voor het bouwen van Vue-projecten door zijn modulaire en declaratieve ontwerpprincipes.
Wat is de compositie-API?
De opkomst van de Composition API betekent een significante afwijking van de conventionele methodologie die wordt gebruikt bij het maken van Vue-componenten met behulp van het Options-object. Het omarmen van deze vooruitstrevende techniek sluit aan bij een steeds assertievere en declaratieve mindset die de nadruk legt op het bouwen van een Vue applicatie zonder gehinderd te worden door ingewikkelde implementatie bijzonderheden.
Motivatie voor de Composition API
De ontwikkelaars van Vue ontdekten de moeilijkheden die gepaard gingen met het gebruik van het Options object bij het bouwen van ingewikkelde webapplicaties naarmate de projectomvang toenam. Met name het beheer van de logica van een component werd minder haalbaar op grote schaal en moeilijker te onderhouden binnen samenwerkingsverbanden.
De conventionele implementatie van het Opties-object leidde vaak tot een overvloed aan componentattributen, waardoor de code door zijn complexiteit moeilijk te begrijpen en te beheren was.
Bovendien bleek het gebruik van gedeelde logica tussen verschillende componenten onpraktisch. Bovendien maakte de verspreide logica, verspreid over meerdere levenscyclushaken en methoden, het begrip van het overkoepelende gedrag van een individuele component nog moeilijker.
Voordelen van de Composition API
Het gebruik van de Composition API biedt een groot aantal voordelen in vergelijking met de Options API, waardoor de algehele functionaliteit en gebruikerservaring verbetert.
Verbeterde prestaties
Vue 3 heeft een innovatieve renderaanpak geïntroduceerd die bekend staat als het Proxy-based Reactivity System, dat is ontworpen om zowel de prestaties als de reactieve mogelijkheden te verbeteren. Door het geheugengebruik te minimaliseren en de reactiviteit te optimaliseren, maakt dit nieuwe systeem het mogelijk om uitgebreide hiërarchieën van componenten efficiënter te verwerken.
Kleinere bundel
Dankzij de gestroomlijnde architectuur en efficiënte toewijzing van bronnen door Vue 3’s geoptimaliseerde codebase en tree-shaking mogelijkheden, heeft het een compactere bundel vergeleken met zijn voorganger, wat resulteert in snellere laadtijden en verbeterde algehele prestaties.
Verbeterde code organisatie
Door gebruik te maken van de mogelijkheden van de Composition API, is het mogelijk om de broncode van een component op te splitsen in beter beheersbare, modulaire eenheden door kleinere, herbruikbare functies te implementeren. Een dergelijke aanpak verbetert niet alleen het begrip en vergemakkelijkt het onderhoud, maar is ook een waardevolle strategie om de uitdagingen van ingewikkelde en uitgebreide componenten aan te gaan.
Herbruikbaarheid van componenten en functies
Het gebruik van compositiefuncties zorgt voor naadloze integratie en hergebruik van code binnen verschillende componenten, wat resulteert in een efficiënte bibliotheek met gedeelde functionaliteiten.
Betere TypeScript-ondersteuning
De introductie van de Composition API heeft het niveau van TypeScript-ondersteuning binnen Visual Studio Code aanzienlijk verbeterd, wat resulteert in een hogere mate van nauwkeurigheid met betrekking tot type-inferentie, evenals een verhoogde mogelijkheid om typografische afwijkingen tijdens het ontwikkelproces te detecteren en aan te pakken.
Vergelijking tussen Options Object en de Composition API
Nu u bekend bent met de theoretische onderbouwing van React’s Composition API, bent u klaar om deze kennis toe te passen in een praktische context. Een vergelijking tussen de voordelen van de Composition API en die van klassecomponenten zal het waardevoorstel verhelderen.
Reactive Data in Vue 3
Reactive data verwijst naar een sleutelprincipe van Vue, dat naadloze interacties mogelijk maakt tussen wijzigingen van gegevens en overeenkomstige updates op de gebruikersinterface zonder dat hiervoor expliciete acties of het herladen van pagina’s nodig zijn. Deze automatische synchronisatie zorgt voor een efficiënte en responsieve ervaring voor gebruikers.
Vue 2 gebruikte de Object.defineProperty methode als basis voor zijn reactieve systeem, waarbij dit systeem werd gebouwd op een data-object dat alle reactieve eigenschappen binnen een applicatie omvatte.
Het gebruik van de data optie binnen een Vue component zorgt voor de automatische implementatie van ES6-compliant getter en setter methoden rond elke eigenschap binnen het data object.
De voornoemde getters en setters bewaakten de onderlinge afhankelijkheid tussen attributen en pasten de gebruikersinterface dynamisch aan als reactie op wijzigingen in een van deze attributen.
Op een meer verfijnde manier volgt hier een illustratie van het genereren van responsieve gegevens in Vue 2 door gebruik te maken van het Options-object:
<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>
In dit voorbeeld illustreren we het proces van het vaststellen van muteerbare variabelen binnen de context van Vue.js. Zodra een variabele is gedefinieerd binnen het data object, wordt het inherent ontvankelijk voor wijzigingen en updates, wat resulteert in wijzigingen in de gebruikersinterface van de bijbehorende applicatie.
Bovendien heb je het object methods gebruikt om JavaScript-functies te implementeren die worden gebruikt in het onderdeel. In dit geval omlijnt het codeblok de functie increment() , waarmee de waarde van de variabele count met één wordt verhoogd.
Om functies als methoden te gebruiken binnen een Vue 2-applicatie, is het essentieel om het sleutelwoord “this” te gebruiken naast de functieaanroep en de bijbehorende variabele(n). Dit komt omdat het sleutelwoord “this” dient om te verwijzen naar de relevante variabelen van het data-object. Als je het sleutelwoord “this” niet gebruikt tijdens het renderen van het component, zal Vue een fout genereren tijdens het montageproces.
Vue 3 heeft een proxy-gebaseerd reactiviteitssysteem geïmplementeerd dat gebruik maakt van de kracht van JavaScript proxies om de functionaliteit te verbeteren. Deze nieuwe aanpak levert opmerkelijke prestatievoordelen op, evenals verbeterd beheer van reactieve afhankelijkheden, wat resulteert in een algehele efficiëntere ontwikkelervaring.
Vue biedt twee soorten functies voor het definiëren van reactieve gegevens - de ref functie en de reactieve functie. De eerste stelt een eenzame reactieve verwijzing naar een bepaalde waarde vast, terwijl de tweede een volledige reactieve structuur construeert die uit talrijke eigenschappen bestaat.
In dit voorbeeld zullen we het proces illustreren van het genereren van responsieve data met behulp van de functie ref binnen de context van 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>
Om de functie ref() te gebruiken binnen de context van Vue 3, moet je deze eerst importeren uit het Vue-pakket. Deze functie dient als middel om reactieve verwijzingen naar verschillende variabelen te maken.
De JavaScript-code gebruikt de functie ref() om een referentie te maken naar de variabele count en de beginwaarde in te stellen op “0”. Vervolgens wordt het geretourneerde object van de functie ref() toegewezen aan de variabele count .Dit object bevat een enkele eigenschap met de naam value , die dient als muteerbare opslag voor de huidige status van de variabele count .
De @click richtlijn wordt gebruikt binnen het Vue framework om klikgebeurtenissen te beheren en erop te reageren die zich voordoen binnen de gerenderde interface van een component. Dit event-binding mechanisme zorgt voor een aangepaste afhandeling van gebruikersinteracties, waardoor ontwikkelaars dynamische functionaliteit kunnen inbouwen of specifieke acties kunnen activeren bij het detecteren van een click event.
In Vue 3 is de methode syntaxis voor het definiëren van functies in componenten vervangen door het gebruik van standaard JavaScript functies. Deze functies worden gedefinieerd binnen het setup blok van het script van het component.
Men kan nu de reactieve eigenschappen gebruiken die werden vastgelegd door de toepassing van de ref() functie door een methode die waarde teruggeeft te associëren met de aangeduide identifier. Ter illustratie gebruikt het gegeven codevoorbeeld de syntaxis “count.value” om te zinspelen op de huidige status van de reactieve eigenschap “count”.
De Computed Functie in Vue 3
De Computed functie dient als een waardevol gereedschap in Vue’s arsenaal en maakt het mogelijk om berekende waarden te creëren die afgeleid zijn van reactieve data. Dit automatische bijwerkingsproces vindt plaats telkens wanneer een afhankelijkheid verandert, waardoor wordt gegarandeerd dat de resulterende berekening altijd actueel en nauwkeurig blijft.
In Vue 2 definieert men het rekengedrag van een component door gebruik te maken van de “computed” optie binnen dat component. Hieronder wordt een voorbeeld gegeven:
<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>
In de bovenstaande illustratie is de doubleCount computed property afhankelijk van de count data property. Als de eigenschap count wordt gewijzigd, zal Vue de eigenschap doubleCount dienovereenkomstig opnieuw evalueren.
In Vue 3 presenteert de introductie van de Composition API een nieuwe benadering voor het definiëren van berekende eigenschappen door het gebruik van de computed functie. De syntaxis voor deze implementatie is als volgt:
<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>
Om gebruik te kunnen maken van de computed functie die is afgeleid van het Vue-pakket, is het noodzakelijk dat je deze functie eerst importeert in je codebase.
In het gegeven codefragment hebben we een berekende eigenschap met de naam “doubleCount” gemaakt met behulp van een berekenbare functie. Deze nomenclatuur benadrukt de afhankelijkheid van berekende eigenschappen van reactieve gegevensbronnen, wat een opvallend kenmerk is van Vue 3’s framework.
De geleverde implementatie definieert een rekenfunctie die een getterfunctie als invoer accepteert, waarbij de getterfunctie verantwoordelijk is voor het afleiden van een waarde uit de reactieve gegevens. In dit geval geeft de doubleCount berekende reflectie het product terug van de count reactieve variabele vermenigvuldigd met twee.
Het is de moeite waard om op te merken dat codeblokken die zijn gemaakt met behulp van de Composition API vaak leesbaarder en beknopter zijn in vergelijking met hun tegenhangers die zijn gemaakt met behulp van het Options-object.
Leren om Custom Directives te maken in Vue
Vue 3’s Composition API biedt een robuuste en veelzijdige methode voor het structureren en hergebruiken van code binnen component templates, waardoor ontwikkelaars meer gestroomlijnde en beheersbare Vue applicaties kunnen maken door verhoogde modulariteit en onderhoudbaarheid.
Vue biedt extra functionaliteit die de efficiëntie verhoogt bij het maken van webapplicaties. Men kan kennis opdoen over het ontwikkelen van op maat gemaakte directives, die het gebruik van specifieke functionaliteiten in verschillende secties van een Vue-project mogelijk maken.