Naučite kako migrirati s Options API-ja na Composition API u Vue 3.
Kako su kreatori Vuea najavili da će Vue 2 doći do kraja života do 31. prosinca 2023., programeri se potiču da prijeđu na Vue 3.
S ovim prijelazom dolazi Composition API, značajka koja nudi modularniji, deklarativniji i sigurniji pristup izgradnji Vue aplikacija.
Što je API za kompoziciju?
Composition API predstavlja promjenu paradigme u pisanju Vue komponenti iz objekt Options. Ovaj razvojni stil usvaja više deklarativni pristup, omogućujući vam da se usredotočite na izradu svoje Vue aplikacije dok apstrahirate detalje implementacije.
Motivacija za Composition API
Kreatori Vue prepoznali su izazove pri izgradnji složenih web aplikacija s objektom Options. Kako su projekti rasli, upravljanje logikom komponente postalo je manje skalabilno i teže za održavanje, posebno u suradničkim okruženjima.
Tradicionalni pristup objektu Options često je rezultirao mnogim svojstvima komponenti, zbog čega je kod bio izazovan za razumijevanje i održavanje.
Dodatno, ponovna upotreba logike komponente u različitim komponentama postala je glomazna. Raspršena logika unutar različitih kuka životnog ciklusa i metoda također je dodala složenost razumijevanju cjelokupnog ponašanja komponente.
Prednosti Composition API-ja
Composition API donosi nekoliko prednosti u odnosu na Options API.
1. Poboljšane performanse
Vue 3 uvodi novi mehanizam renderiranja koji se zove Proxy-based Reactivity System. Ovaj sustav pruža bolje performanse smanjenjem potrošnje memorije i poboljšanjem reaktivnosti. Novi sustav reaktivnosti omogućuje Vue 3 učinkovitije rukovanje divovskim stablima komponenti.
2. Manja veličina paketa
Zahvaljujući optimiziranoj bazi koda i podršci za potresanje stabla, Vue 3 ima manju veličinu paketa od Vue 2. Ovo smanjenje veličine paketa dovodi do bržeg vremena učitavanja i poboljšanih performansi.
3. Poboljšana organizacija koda
Korištenjem Composition API-ja možete organizirati kod svoje komponente u manje funkcije koje se mogu ponovno koristiti. To promiče bolje razumijevanje i održavanje, posebno za velike i složene komponente.
4. Ponovno korištenje komponenti i funkcija
Funkcije sastava mogu se jednostavno ponovno upotrijebiti u različitim komponentama, olakšavajući dijeljenje koda i stvaranje biblioteke funkcija koje se mogu ponovno upotrijebiti.
5. Bolja podrška za TypeScript
Composition API pruža sveobuhvatniju podršku za TypeScript, omogućujući preciznije zaključivanje tipa i lakšu identifikaciju grešaka povezanih s tipom tijekom razvoja.
Usporedba između Options Object i Composition API-ja
Sada kada razumijete teoriju iza Composition API-ja, možete ga početi koristiti u praksi. Da bismo razumjeli prednosti Composition API-ja, usporedimo neke ključne aspekte oba pristupa.
Reaktivni podaci u Vue 3
Reaktivni podaci temeljni su koncept u Vueu koji omogućuje promjenama podataka u vašoj aplikaciji da automatski pokreću ažuriranja u korisničkom sučelju.
Vue 2 temelji svoj reaktivni sustav na Object.defineProperty metoda i oslanjao se na podatkovni objekt koji sadrži sva reaktivna svojstva.
Kada ste definirali svojstvo podataka s opcijom podataka u Vue komponenti, Vue je automatski omotao svako svojstvo u podatkovni objekt pomoću gettera i postavljača, nove značajke ECMA Script (ES6).
Ovi dobivatelji i postavljači pratili su ovisnosti između svojstava i ažurirali korisničko sučelje kada ste izmijenili bilo koje svojstvo.
Evo primjera kako stvarate reaktivne podatke u Vue 2 s objektom Options:
Count: {{ count }}</p>
