Sužinokite, kaip „Vue 3“ pereiti iš „Options API“ į „Composition API“.
Kadangi „Vue“ kūrėjai paskelbė, kad „Vue 2“ gyvavimo pabaiga pasieks iki 2023 m. gruodžio 31 d., kūrėjai raginami pereiti prie „Vue 3“.
Su šiuo perėjimu atsiranda kompozicijos API – funkcija, kuri siūlo moduliškesnį, deklaratyvesnį ir tipiškesnį metodą kuriant Vue programas.
Kas yra kompozicijos API?
Kompozicijos API reiškia paradigmos pokytį rašant Vue komponentus iš objektą Options. Šis kūrimo stilius taiko labiau deklaratyvų požiūrį, leidžiantį sutelkti dėmesį į „Vue“ programos kūrimą ir atitraukti diegimo detales.
Kompozicijos API motyvacija
Vue kūrėjai pripažino iššūkius kuriant sudėtingas žiniatinklio programas naudojant parinkčių objektą. Didėjant projektams, komponento logikos valdymas tapo mažiau keičiamas ir sunkiau prižiūrimas, ypač bendradarbiavimo aplinkoje.
Tradicinis Options objekto metodas dažnai lėmė daug komponentų savybių, todėl kodą buvo sudėtinga suprasti ir prižiūrėti.
Be to, pakartotinai naudoti komponentų logiką skirtinguose komponentuose tapo sudėtinga. Išsklaidyta logika įvairiuose gyvavimo ciklo kabliuose ir metoduose taip pat padidino sudėtingumo suprasti bendrą komponento elgesį.
Kompozicijos API pranašumai
Kompozicijos API turi keletą pranašumų, palyginti su parinkčių API.
1. Patobulintas našumas
„Vue 3“ pristato naują atvaizdavimo mechanizmą, vadinamą tarpinio serverio reaktyvumo sistema. Ši sistema užtikrina geresnį našumą sumažindama atminties suvartojimą ir pagerindama reaktyvumą. Naujoji reaktyvumo sistema leidžia Vue 3 efektyviau tvarkyti milžiniškus komponentų medžius.
2. Mažesnis paketo dydis
Dėl optimizuotos kodų bazės ir medžio drebėjimo palaikymo „Vue 3“ turi mažesnį paketo dydį nei „Vue 2“. Dėl šio paketo dydžio sumažinimo pailgėja įkėlimo laikas ir pagerėja našumas.
3. Patobulintas kodo organizavimas
Naudodami kompozicijos API, galite suskirstyti savo komponento kodą į mažesnes, pakartotinai naudojamas funkcijas. Tai skatina geresnį supratimą ir priežiūrą, ypač didelių ir sudėtingų komponentų atveju.
4. Komponentų ir funkcijų pakartotinis naudojimas
Kompozicijos funkcijas galima lengvai pakartotinai panaudoti skirtinguose komponentuose, palengvinant dalijimąsi kodu ir sukurti daugkartinio naudojimo funkcijų biblioteką.
5. Geresnis TypeScript palaikymas
Kompozicijos API teikia išsamesnį „TypeScript“ palaikymą, leidžiantį tiksliau nustatyti tipą ir lengviau nustatyti su tipu susijusias klaidas kūrimo metu.
Objekto parinkčių ir kompozicijos API palyginimas
Dabar, kai suprantate kompozicijos API teoriją, galite pradėti ją naudoti praktiškai. Norėdami suprasti kompozicijos API pranašumus, palyginkime kai kuriuos pagrindinius abiejų metodų aspektus.
Reaktyvūs duomenys Vue 3
Reaktyvūs duomenys yra pagrindinė „Vue“ koncepcija, leidžianti jūsų programos duomenų pakeitimams automatiškai suaktyvinti vartotojo sąsajos naujinimus.
„Vue 2“ reaktyvioji sistema buvo pagrįsta Object.defineProperty metodą ir rėmėsi duomenų objektu, turinčiu visas reaktyviąsias savybes.
Kai apibrėžėte duomenų ypatybę naudodami duomenų parinktį Vue komponente, Vue automatiškai įtraukė kiekvieną ypatybę į duomenų objektą su geteriais ir nustatymais, nauja ECMA scenarijaus (ES6) funkcija.
Šie gaudytojai ir nustatytojai stebėjo ypatybių priklausomybes ir atnaujino vartotojo sąsają, kai pakeitėte bet kurią nuosavybę.
Štai pavyzdys, kaip sukuriate reaktyvius duomenis Vue 2 naudodami objektą Options:
Count: {{ count }}</p>
