Deoarece creatorii framework-ului Vue au comunicat că suportul pentru versiunea 2 va înceta pe data de 31 decembrie 2023, dezvoltatorii sunt îndemnați să efectueze migrarea către Vue 3.
Această tranziție aduce cu sine API-ul Composition, o caracteristică care oferă o metodă mai structurată, declarativă și cu o verificare mai riguroasă a tipurilor pentru construcția aplicațiilor Vue.
Ce reprezintă API-ul Composition?
API-ul Composition marchează o schimbare fundamentală în modul de scriere a componentelor Vue, depășind modelul bazat pe obiectul Options. Această abordare de dezvoltare se concentrează pe o structură mai declarativă, permițându-vă să vă axați pe logica aplicației, în timp ce detaliile de implementare sunt gestionate în mod abstract.
Justificarea introducerii API-ului Composition
Dezvoltatorii Vue au identificat dificultățile care apăreau în crearea de aplicații web complexe cu ajutorul obiectului Options. Pe măsură ce proiectele creșteau în dimensiune, gestionarea logicii componentelor devenea mai puțin scalabilă și mai dificilă de întreținut, în special în echipe mari.
Abordarea clasică, bazată pe obiectul Options, conducea adesea la un număr mare de proprietăți ale componentelor, ceea ce îngreuna înțelegerea și întreținerea codului.
Mai mult, reutilizarea logicii între diverse componente devenea dificilă. Dispersarea logicii în cadrul diferitelor metode ale ciclului de viață complexifica înțelegerea comportamentului general al unei componente.
Avantajele API-ului Composition
API-ul Composition oferă numeroase beneficii în comparație cu API-ul Options.
1. Performanță superioară
Vue 3 introduce un nou sistem de redare, numit Sistem de reactivitate bazat pe proxy. Acesta oferă performanțe îmbunătățite prin reducerea consumului de memorie și prin creșterea reactivității. Noul sistem permite lui Vue 3 să gestioneze mai eficient structuri mari de componente.
2. Dimensiune redusă a pachetului
Datorită optimizării codului sursă și suportului pentru tree-shaking, Vue 3 are un pachet de dimensiuni mai mici comparativ cu Vue 2. Această reducere a dimensiunii pachetului se traduce în timpi de încărcare mai rapizi și o performanță globală mai bună.
3. Organizare îmbunătățită a codului
Prin utilizarea API-ului Composition, aveți posibilitatea de a structura codul componentelor în funcții mici și reutilizabile. Acest lucru contribuie la o mai bună înțelegere și întreținere, în special în cazul componentelor mari și complexe.
4. Reutilizarea funcțiilor și componentelor
Funcțiile create prin API-ul Composition pot fi reutilizate cu ușurință în diverse componente, simplificând partajarea codului și crearea unei biblioteci de funcții reutilizabile.
5. Suport TypeScript îmbunătățit
API-ul Composition oferă un suport mai extins pentru TypeScript, permițând o inferență mai precisă a tipurilor de date și o identificare mai ușoară a erorilor legate de tip în timpul dezvoltării.
Comparație între obiectul Options și API-ul Composition
Acum că ați înțeles principiile API-ului Composition, puteți începe să îl utilizați în practică. Pentru a evidenția avantajele API-ului Composition, vom compara câteva aspecte cheie ale ambelor abordări.
Date reactive în Vue 3
Datele reactive sunt un concept fundamental în Vue, care permite modificărilor datelor din aplicația dumneavoastră să declanșeze automat actualizări în interfața cu utilizatorul.
Vue 2 se baza pe metoda Object.defineProperty pentru sistemul său reactiv și folosea un obiect de date care includea toate proprietățile reactive.
Atunci când defineați o proprietate de date folosind opțiunea `data` într-o componentă Vue, Vue încapsula automat fiecare proprietate din obiectul `data` cu getteri și setteri, o funcționalitate introdusă de ECMA Script (ES6).
Acești getteri și setteri monitorizau dependențele dintre proprietăți și actualizau interfața utilizator atunci când modificați o proprietate.
Iată un exemplu de creare a datelor reactive în Vue 2 cu ajutorul obiectului Options:
<template>
<div>
<p>Număr: {{ count }}</p>
<button @click="increment">Incrementează</button>
</div>
</template><script>
export default {
data() {
return {
count: 0,
};
},methods: {
increment() {
this.count++;
},
},
};
</script>
Acest bloc de cod demonstrează cum se creează variabile în Vue 2. Vue face reactive în mod automat variabilele declarate în obiectul `data`. Modificările efectuate asupra unei proprietăți `data` (în acest caz, `count`) vor determina actualizarea interfeței utilizator a aplicației.
În plus, ați utilizat obiectul `methods` pentru a defini funcțiile JavaScript folosite în componentă. În acest exemplu, fragmentul definește metoda `increment()`, care mărește valoarea variabilei `count` cu 1.
Când scrieți funcții ca metode în Vue 2, trebuia să folosiți și cuvântul cheie `this` (`this.count++`). Cuvântul cheie `this` vă permite să faceți referire la variabilele din obiectul `data`. Lipsa acestui cuvânt cheie ar genera o eroare la montarea componentei de către Vue.
Sistemul de reactivitate bazat pe proxy din Vue 3 folosește proxy-uri JavaScript pentru a obține reactivitatea, ceea ce se traduce prin îmbunătățiri semnificative ale performanței și o gestionare mai bună a dependențelor reactive.
Pentru a defini datele reactive în Vue 3, se folosesc funcțiile `ref` sau `reactive`. Funcția `ref` creează o singură referință reactivă la o valoare, în timp ce funcția `reactive` creează un obiect reactiv care conține mai multe proprietăți.
Iată un exemplu despre cum se creează date reactive folosind funcția `ref` în Vue 3:
<script setup>
import { ref } from 'vue';const count = ref(0);
function increment() {
count.value++;
}
</script><template>
<div>
<p>Număr: {{ count }}</p>
<button @click="increment">Incrementează</button>
</div>
</template>
Pentru a folosi funcția `ref()` în Vue 3, trebuie mai întâi să o importați din pachetul `vue`. Funcția `ref()` creează referințe reactive la variabile.
Exemplul de bloc de cod creează variabila `count` cu funcția `ref()` și îi setează valoarea inițială la 0. Funcția `ref()` returnează un obiect care conține o proprietate `value`. Această proprietate `value` stochează valoarea reală a numărului.
Directiva `@click` este utilizată pentru a gestiona evenimentele de clic în Vue.
Funcțiile necesare componentei dumneavoastră sunt definite în blocul de configurare al scriptului. Vue 3 a înlocuit sintaxa metodelor pentru definirea funcțiilor din Vue 2 cu funcții JavaScript standard.
Acum puteți accesa variabilele reactive pe care le-ați definit cu funcția `ref()` adăugând proprietatea `value` la numele variabilei. De exemplu, blocul de cod folosește `count.value` pentru a face referire la valoarea variabilei `count`.
Funcția `computed` în Vue 3
Funcția `computed` este o altă caracteristică Vue care vă permite să definiți valori derivate pe baza datelor reactive. Proprietățile calculate sunt actualizate automat de fiecare dată când se modifică dependențele lor, asigurându-se că valoarea derivată este întotdeauna actualizată.
În Vue 2, comportamentul calculat se definea cu opțiunea `computed` într-o componentă. Iată un exemplu:
<template>
<div>
<p>Număr: {{ count }}</p>
<p>Dublu: {{ doubleCount }}</p>
<button @click="incrementCount">Incrementează numărul</button>
</div>
</template><script>
export default {
data() {
return {
count: 0
};
},
computed: {
doubleCount() {
return this.count * 2;
}
},
methods: {
incrementCount() {
this.count++;
}
}
};
</script>
În exemplul de mai sus, proprietatea calculată `doubleCount` depinde de proprietatea `count` din `data`. De fiecare dată când proprietatea `count` se modifică, Vue recalculează proprietatea `doubleCount`.
În Vue 3, API-ul Composition introduce o nouă modalitate de a defini proprietățile calculate folosind funcția `computed`. Iată cum arată:
<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>Număr: {{ count }}</p>
<p>Dublu: {{ doubleCount }}</p>
<button @click="incrementCount">Incrementează numărul</button>
</div>
</template>
Trebuie să importați funcția `computed` din pachetul `vue` înainte de a o putea folosi.
În blocul de cod de mai sus ați definit un `ref` calculat `doubleCount` folosind funcția `computed`. Vue 3 tratează proprietățile calculate ca referințe calculate, subliniind dependența lor de variabilele reactive.
Funcția `computed` primește ca argument o funcție getter, care calculează valoarea derivată pe baza datelor reactive. În acest caz, referința calculată `doubleCount` returnează rezultatul înmulțirii variabilei reactive `count` cu 2.
Observați că blocurile de cod bazate pe API-ul Composition sunt mai ușor de citit și mai concise comparativ cu cele scrise folosind obiectul Options.
Învățați cum să creați directive personalizate în Vue
API-ul Composition din Vue 3 oferă o abordare robustă și flexibilă pentru organizarea și reutilizarea codului în componentele Vue. Puteți construi aplicații Vue mai modulare și mai ușor de întreținut cu ajutorul API-ului Composition.
Vue oferă de asemenea funcționalități suplimentare pentru a maximiza productivitatea în timpul dezvoltării de aplicații web. Puteți învăța să creați directive personalizate pentru a reutiliza anumite funcții în diverse secțiuni ale aplicației dumneavoastră Vue.