S obzirom na to da su kreatori Vue-a najavili kraj podrške za Vue 2 do 31. decembra 2023. godine, programeri se podstiču na prelazak na Vue 3.
Ovaj prelazak sa sobom donosi i Composition API, funkcionalnost koja omogućava modularniji, deklarativniji i sigurniji pristup kreiranju Vue aplikacija.
Šta je Composition API?
Composition API predstavlja fundamentalnu promenu u načinu pisanja Vue komponenti u odnosu na Options Object. Ovaj stil razvoja naglašava deklarativni pristup, omogućavajući vam da se koncentrišete na izgradnju Vue aplikacije, dok se detalji implementacije apstrahuju.
Motivacija za Composition API
Kreatori Vue-a uvideli su izazove koji se javljaju prilikom kreiranja kompleksnih web aplikacija koristeći Options Object. Kako su projekti rasli, upravljanje logikom komponente postajalo je manje skalabilno i teže za održavanje, posebno u okruženjima za saradnju.
Tradicionalni pristup pomoću Options Object često je rezultirao prevelikim brojem svojstava komponente, što je kod činilo izazovnim za razumevanje i održavanje.
Pored toga, ponovna upotreba logike komponente u različitim komponentama postala je glomazna. Razbacana logika unutar različitih hook-ova i metoda životnog ciklusa dodatno je otežavala razumevanje celokupnog ponašanja komponente.
Prednosti Composition API-ja
Composition API donosi brojne prednosti u odnosu na Options API.
1. Poboljšane performanse
Vue 3 uvodi novi mehanizam renderovanja pod nazivom Proxy-based Reactivity System. Ovaj sistem pruža bolje performanse smanjujući potrošnju memorije i poboljšavajući reaktivnost. Novi sistem reaktivnosti omogućava Vue 3 da efikasnije upravlja sa velikim stablima komponenti.
2. Manja veličina paketa
Zahvaljujući optimizovanoj bazi koda i podršci za tree-shaking, Vue 3 ima manju veličinu paketa od Vue 2. Ovo smanjenje veličine paketa dovodi do bržeg učitavanja i poboljšanih performansi.
3. Poboljšana organizacija koda
Koristeći Composition API, možete organizovati kod svoje komponente u manje funkcije koje se mogu ponovo koristiti. Ovo promoviše bolje razumevanje i održavanje, naročito za velike i kompleksne komponente.
4. Ponovna upotreba komponenti i funkcija
Funkcije kompozicije se mogu jednostavno ponovo koristiti u različitim komponentama, olakšavajući deljenje koda i kreiranje biblioteke funkcija za višekratnu upotrebu.
5. Bolja podrška za TypeScript
Composition API pruža sveobuhvatniju podršku za TypeScript, omogućavajući preciznije zaključivanje tipova i jednostavniju identifikaciju grešaka u vezi sa tipovima tokom razvoja.
Poređenje između Options Object i Composition API
Sada kada razumete teoriju iza Composition API-ja, možete početi da ga primenjujete u praksi. Da bismo razumeli prednosti Composition API-ja, uporedićemo neke ključne aspekte oba pristupa.
Reaktivni podaci u Vue 3
Reaktivni podaci su fundamentalni koncept u Vue-u koji omogućava da promene podataka u vašoj aplikaciji automatski pokrenu ažuriranja u korisničkom interfejsu.
Vue 2 je bazirao svoj reaktivni sistem na metodi `Object.defineProperty` i oslanjao se na `data` objekat koji sadrži sva reaktivna svojstva.
Kada ste definisali svojstvo podataka sa `data` opcijom u Vue komponenti, Vue je automatski obuhvatio svako svojstvo u `data` objekat sa getterima i setterima, novom funkcijom ECMAScript (ES6).
Ovi getteri i setteri su pratili zavisnosti između svojstava i ažurirali korisnički interfejs kada ste modifikovali bilo koje svojstvo.
Evo primera kako kreirate reaktivne podatke u Vue 2 koristeći 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>
Ovaj blok koda pokazuje kako se kreiraju promenljive u Vue 2. Vue automatski reaktivira promenljive definisane u `data` objektu. Promene koje unesete u svojstvo `data` (count) će izazvati ažuriranje korisničkog interfejsa vaše aplikacije.
Pored toga, koristili ste `methods` objekat za definisanje JavaScript funkcija koje se koriste unutar komponente. U ovom primeru, isecak definiše metodu `increment()`, koja povećava vrednost promenljive `count` za 1.
Kada pišete funkcije kao metode u Vue 2, takođe ste morali da koristite ključnu reč `this` (`this.count++`). Ova ključna reč vam omogućava da referišete na promenljive u `data` objektu. Izostavljanje ove ključne reči će izazvati grešku kada Vue montira komponentu.
Sistem reaktivnosti Vue 3 zasnovan na proksiju koristi JavaScript proksi za postizanje reaktivnosti, što nudi značajna poboljšanja performansi i bolje upravljanje reaktivnim zavisnostima.
Koristite `ref` ili `reactive` funkcije za definisanje reaktivnih podataka u Vue 3. Funkcija `ref` kreira jednu reaktivnu referencu na vrednost, dok `reactive` funkcija kreira reaktivni objekat koji sadrži više svojstava.
Evo primera kako da kreirate reaktivne podatke pomoću funkcije `ref` u 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>
Da biste koristili funkciju `ref()` u Vue 3, prvo morate da je uvezete iz `vue` paketa. Funkcija `ref()` kreira reaktivne reference na promenljive.
Primer bloka koda kreira promenljivu `count` pomoću funkcije `ref()` i postavlja njenu početnu vrednost na 0. Funkcija `ref()` vraća objekat sa svojstvom `value`. Ovo svojstvo `value` sadrži stvarnu vrednost brojača.
Direktiva `@click` se koristi za rukovanje događajima klikova u Vue-u.
Funkcije potrebne u vašoj komponenti definišete unutar bloka za podešavanje skripte. Vue 3 je zamenio sintaksu metoda definisanja funkcija u Vue 2 regularnim JavaScript funkcijama.
Sada možete pristupiti reaktivnim varijablama koje ste definisali pomoću funkcije `ref()` tako što ćete dodati metod `value` imenu promenljive. Na primer, blok koda koristi `count.value` da referiše na vrednost promenljive `count`.
Izračunata funkcija u Vue 3
Funkcija `computed` je još jedna Vue funkcija koja vam omogućava da definišete izvedene vrednosti na osnovu reaktivnih podataka. Izračunata svojstva se automatski ažuriraju kad god se njihove zavisnosti promene, osiguravajući da je izvedena vrednost uvek ažurna.
U Vue 2, definišete izračunato ponašanje pomoću `computed` opcije unutar komponente. Evo primera:
<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>
U gornjem primeru, izračunato svojstvo `doubleCount` zavisi od svojstva podataka `count`. Kad god se promeni svojstvo `count`, Vue ponovo izračunava svojstvo `doubleCount`.
U Vue 3, Composition API uvodi novi način definisanja izračunatih svojstava pomoću `computed` funkcije. Evo kako to izgleda:
<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>
Morate da uvezete `computed` funkciju iz `vue` paketa da biste mogli da je koristite.
Definisali ste `doubleCount` izračunatu referencu u gornjem bloku koda pomoću `computed` funkcije. Vue 3 se odnosi na izračunate osobine kao na izračunate reference, naglašavajući njihovo oslanjanje na reaktivne varijable.
Funkcija `computed` uzima getter funkciju kao argument, koja izračunava izvedenu vrednost na osnovu reaktivnih podataka. U ovom slučaju, izračunata referenca `doubleCount` vraća množenje reaktivne promenljive `count` sa 2.
Primećujete da su blokovi koda zasnovani na Composition API-ju čitljiviji i koncizniji od onih napisanih pomoću Options Object-a.
Naučite da kreirate prilagođene direktive u Vue-u
Vue 3 Composition API predstavlja moćan i fleksibilan pristup organizovanju i ponovnoj upotrebi koda u Vue komponentama. Možete da kreirate više modularnih Vue aplikacija koje se lako održavaju pomoću Composition API-ja.
Vue takođe nudi dodatne funkcionalnosti za maksimizaciju produktivnosti tokom razvoja web aplikacija. Možete naučiti da kreirate prilagođene direktive za ponovnu upotrebu određenih funkcionalnosti u različitim delovima vaše Vue aplikacije.