Naučite se preseliti z API-ja Options na API Composition v Vue 3.
Ker so ustvarjalci Vue napovedali, da bo Vue 2 dosegel konec življenjske dobe do 31. decembra 2023, razvijalce spodbujamo, da preidejo na Vue 3.
S tem prehodom prihaja Composition API, funkcija, ki ponuja bolj modularen, deklarativen in tipsko varen pristop k izdelavi aplikacij Vue.
Kaj je API za sestavo?
Composition API predstavlja spremembo paradigme pri pisanju komponent Vue iz predmet Možnosti. Ta razvojni slog sprejme bolj deklarativen pristop, ki vam omogoča, da se osredotočite na gradnjo svoje aplikacije Vue, medtem ko abstrahirate podrobnosti izvedbe.
Motivacija za API za sestavo
Ustvarjalci Vue so prepoznali izzive pri gradnji kompleksnih spletnih aplikacij z objektom Options. Ko so projekti rasli, je upravljanje logike komponente postalo manj razširljivo in težje za vzdrževanje, zlasti v sodelovalnih okoljih.
Tradicionalni objektni pristop Možnosti je pogosto povzročil številne lastnosti komponent, zaradi česar je bilo kodo težko razumeti in vzdrževati.
Poleg tega je ponovna uporaba logike komponent v različnih komponentah postala okorna. Razpršena logika znotraj različnih kavljev in metod življenjskega cikla je prav tako dodatno otežila razumevanje celotnega vedenja komponente.
Prednosti API-ja za sestavo
Composition API prinaša številne prednosti pred Options API.
1. Izboljšana zmogljivost
Vue 3 uvaja nov mehanizem upodabljanja, imenovan Proxy-based Reactivity System. Ta sistem zagotavlja boljše delovanje z zmanjšanjem porabe pomnilnika in izboljšano odzivnostjo. Nov sistem reaktivnosti omogoča Vue 3, da učinkoviteje obravnava več velikanskih dreves komponent.
2. Manjša velikost svežnja
Zahvaljujoč optimizirani kodni bazi in podpori za tresenje dreves ima Vue 3 manjšo velikost paketa kot Vue 2. To zmanjšanje velikosti svežnja vodi do hitrejših časov nalaganja in izboljšane zmogljivosti.
3. Izboljšana organizacija kode
Z uporabo API-ja za sestavljanje lahko kodo svoje komponente organizirate v manjše funkcije, ki jih je mogoče ponovno uporabiti. To spodbuja boljše razumevanje in vzdrževanje, zlasti za velike in kompleksne komponente.
4. Ponovna uporabnost komponent in funkcij
Funkcije sestavljanja je mogoče enostavno ponovno uporabiti v različnih komponentah, kar olajša skupno rabo kode in ustvarjanje knjižnice funkcij za večkratno uporabo.
5. Boljša podpora za TypeScript
API za sestavo zagotavlja celovitejšo podporo za TypeScript, ki omogoča natančnejše sklepanje o vrsti in lažje prepoznavanje napak, povezanih s tipom, med razvojem.
Primerjava med objektom možnosti in API-jem za sestavo
Zdaj, ko razumete teorijo API-ja za sestavljanje, ga lahko začnete uporabljati v praksi. Da bi razumeli prednosti API-ja za sestavljanje, primerjajmo nekaj ključnih vidikov obeh pristopov.
Reaktivni podatki v Vue 3
Reaktivni podatki so temeljni koncept v Vue, ki omogoča, da spremembe podatkov v vaši aplikaciji samodejno sprožijo posodobitve v uporabniškem vmesniku.
Vue 2 je svoj reaktivni sistem temeljil na Object.defineProperty metodo in se zanaša na podatkovni objekt, ki vsebuje vse reaktivne lastnosti.
Ko ste definirali podatkovno lastnost z možnostjo podatkov v komponenti Vue, je Vue samodejno ovil vsako lastnost v podatkovnem objektu s pridobivalniki in nastavljalci, novo funkcijo ECMA Script (ES6).
Ti pridobivalniki in nastavljalci so sledili odvisnostim med lastnostmi in posodobili uporabniški vmesnik, ko ste spremenili katero koli lastnost.
Tukaj je primer, kako ustvarite reaktivne podatke v Vue 2 s predmetom Options:
Count: {{ count }}</p>
