Deoarece creatorii Vue au anunțat că Vue 2 va ajunge la sfârșitul vieții până la 31 decembrie 2023, dezvoltatorii sunt încurajați să treacă la Vue 3.
Odată cu această tranziție vine API-ul Composition, o caracteristică care oferă o abordare mai modulară, declarativă și mai sigură de tip pentru construirea aplicațiilor Vue.
Cuprins
Ce este Composition API?
API-ul Composition reprezintă o schimbare de paradigmă în scrierea componentelor Vue din obiectul Opțiuni. Acest stil de dezvoltare adoptă o abordare mai declarativă, permițându-vă să vă concentrați pe construirea aplicației Vue în timp ce retrageți detaliile de implementare.
Motivația pentru API-ul Compoziție
Creatorii Vue au recunoscut provocările atunci când construiesc aplicații web complexe cu obiectul Opțiuni. Pe măsură ce proiectele au crescut, gestionarea logicii componentei a devenit mai puțin scalabilă și mai greu de întreținut, mai ales în mediile de colaborare.
Abordarea tradițională a obiectelor Options a dus adesea la multe proprietăți ale componentelor, făcând codul dificil de înțeles și de întreținut.
În plus, reutilizarea logicii componentelor între diferite componente a devenit greoaie. Logica dispersată în cadrul diferitelor cârlige și metode ale ciclului de viață a adăugat, de asemenea, complexitate înțelegerii comportamentului general al unei componente.
Beneficiile Composition API
API-ul Composition aduce mai multe avantaje față de API-ul Options.
1. Performanță îmbunătățită
Vue 3 introduce un nou mecanism de redare numit Sistem de reactivitate bazat pe proxy. Acest sistem oferă performanțe mai bune prin reducerea consumului de memorie și îmbunătățirea reactivității. Noul sistem de reactivitate îi permite lui Vue 3 să gestioneze mai eficient arbori de componente gigantice.
2. Dimensiune mai mică a pachetului
Datorită bazei de cod optimizate și suportului pentru tree-shaking, Vue 3 are o dimensiune mai mică a pachetului decât Vue 2. Această reducere a dimensiunii pachetului duce la timpi de încărcare mai rapidi și la o performanță îmbunătățită.
3. Organizarea codului îmbunătățită
Utilizând API-ul Composition, puteți organiza codul componentei dvs. în funcții mai mici, reutilizabile. Acest lucru promovează o mai bună înțelegere și întreținere, în special pentru componentele mari și complexe.
4. Reutilizarea componentelor și funcțiilor
Funcțiile de compoziție pot fi reutilizate cu ușurință în diferite componente, facilitând partajarea codului și crearea unei biblioteci de funcții reutilizabile.
5. Suport mai bun TypeScript
API-ul Composition oferă suport TypeScript mai cuprinzător, permițând o inferență mai precisă a tipului ș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ă înțelegeți teoria din spatele API-ului Composition, puteți începe să îl utilizați în practică. Pentru a înțelege avantajele API-ului Composition, să comparăm 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 dvs. să declanșeze automat actualizări în interfața cu utilizatorul.
Vue 2 și-a bazat sistemul reactiv pe metoda Object.defineProperty și s-a bazat pe un obiect de date care conține toate proprietățile reactive.
Când ați definit o proprietate de date cu opțiunea de date într-o componentă Vue, Vue a împachetat automat fiecare proprietate în obiectul de date cu getters și setters, o nouă caracteristică ECMA Script (ES6).
Acești generatori și seteri au urmărit dependențele dintre proprietăți și au actualizat interfața de utilizare atunci când ați modificat orice proprietate.
Iată un exemplu despre cum creați date reactive în Vue 2 cu obiectul Opțiuni:
<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>
Blocul de cod demonstrează cum se creează variabile în Vue 2. Vue face reactive automat variabilele definite în obiectul de date. Modificările pe care le faceți unei proprietăți de date (număr) vor provoca o actualizare în interfața de utilizare a aplicației dvs.
În plus, ați folosit obiectul metode pentru a defini funcțiile JavaScript utilizate în componentă. În acest exemplu, fragmentul definește metoda increment(), care crește valoarea variabilei de numărare cu 1.
Când scrieți funcții ca metode în Vue 2, trebuia să utilizați și cuvântul cheie this (this.count++). Cuvântul cheie this vă permite să indicați către variabile din obiectul de date. Omiterea acestui cuvânt cheie va genera o eroare atunci când Vue montează componenta.
Sistemul de reactivitate bazat pe proxy al Vue 3 utilizează proxy-uri JavaScript pentru a obține reactivitate, ceea ce oferă îmbunătățiri semnificative ale performanței și o mai bună gestionare a dependențelor reactive.
Utilizați funcțiile ref sau reactive pentru a defini datele reactive în Vue 3. Funcția ref creează o singură referință reactivă la o valoare, în timp ce funcția reactivă creează un obiect reactiv care conține mai multe proprietăți.
Iată un exemplu despre cum să creați date reactive cu funcția ref în 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>
Pentru a utiliza funcția ref() în Vue 3, mai întâi trebuie 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 setează valoarea sa inițială la 0. Funcția ref() returnează un obiect cu o proprietate valoare. Această proprietate de valoare deține valoarea reală a numărului.
Directiva @click este folosită pentru a gestiona evenimentele de clic în Vue.
Definiți funcțiile necesare în componenta dvs. în blocul de configurare a scriptului. Vue 3 a înlocuit sintaxa metodelor de definire a funcțiilor din Vue 2 cu funcții JavaScript obișnuite.
Acum puteți accesa variabilele reactive pe care le-ați definit cu funcția ref() prin atașarea unei metode de valoare la numele variabilei. De exemplu, blocul de cod folosește count.value pentru a se referi la valoarea variabilei count.
Funcția calculată î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 ori de câte ori dependențele lor se schimbă, asigurându-se că valoarea derivată este întotdeauna actualizată.
În Vue 2, definiți comportamentul calculat cu opțiunea calculată într-o componentă. Iată un exemplu:
<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>
În exemplul de mai sus, proprietatea calculată doubleCount depinde de proprietatea datelor count. Ori de câte ori proprietatea count se modifică, Vue recalculează proprietatea doubleCount.
În Vue 3, API-ul Composition introduce un nou mod de a defini proprietățile calculate folosind funcția calculată. 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>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
<button @click="incrementCount">Increment Count</button>
</div>
</template>
Trebuie să importați funcția calculată din pachetul vue înainte de a putea folosi funcția.
Ați definit un ref calculat doubleCount în blocul de cod de mai sus cu funcția calculată. Vue 3 se referă la proprietățile calculate ca referințe calculate, evidențiind dependența lor de variabilele reactive.
Funcția calculată ia ca argument o funcție getter, care calculează valoarea derivată pe baza datelor reactive. În acest caz, reful calculat doubleCount returnează înmulțirea variabilei reactive de numărare cu 2.
Observați că blocurile de cod bazate pe API-ul Composition sunt mai lizibile și mai concise decât cele scrise cu obiectul Opțiuni.
Aflați cum să creați directive personalizate în Vue
API-ul Vue 3 Composition prezintă o abordare puternică ș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 API-ul Composition.
Vue oferă, de asemenea, funcții suplimentare pentru maximizarea productivității în timp ce dezvoltă aplicații web. Puteți învăța să creați directive personalizate pentru a reutiliza anumite funcții în diferite părți ale aplicației dumneavoastră Vue.