Opi siirtymään Options API: sta Composition API: hen Vue 3:ssa.

Koska Vuen luojat ovat ilmoittaneet, että Vue 2:n käyttöikä päättyy 31. joulukuuta 2023 mennessä, kehittäjiä kehotetaan vaihtamaan Vue 3:een.

Tämän siirtymän mukana tulee Composition API, ominaisuus, joka tarjoaa modulaarisemman, deklaratiivisemman ja tyyppiturvallisemman lähestymistavan Vue-sovellusten rakentamiseen.

Mikä on Composition API?

Composition API edustaa paradigman muutosta Vue-komponenttien kirjoittamisessa Options-objekti. Tämä kehitystyyli omaksuu deklaratiivisemman lähestymistavan, jonka avulla voit keskittyä Vue-sovelluksesi rakentamiseen ja ottaa huomioon toteutuksen yksityiskohdat.

Motiivi Composition API: lle

Vuen luojat tunnistivat haasteet rakennettaessa monimutkaisia ​​verkkosovelluksia Options-objektin avulla. Projektien kasvaessa komponentin logiikan hallinta muuttui vähemmän skaalautuvaksi ja vaikeammaksi ylläpitää, etenkin yhteistyöympäristöissä.

Perinteinen Options-oliolähestymistapa johti usein moniin komponenttiominaisuuksiin, mikä teki koodista haastavaa ymmärtää ja ylläpitää.

Lisäksi komponenttilogiikan uudelleenkäytöstä eri komponenttien välillä tuli hankalaa. Hajallaan oleva logiikka eri elinkaaren koukkujen ja menetelmien sisällä lisäsi myös komponentin yleisen käyttäytymisen ymmärtämistä.

Composition API: n edut

Composition API tuo useita etuja Options API: han verrattuna.

1. Parannettu suorituskyky

Vue 3 esittelee uuden renderöintimekanismin nimeltä välityspalvelinpohjainen reaktiivisuusjärjestelmä. Tämä järjestelmä tarjoaa paremman suorituskyvyn vähentämällä muistin kulutusta ja parantamalla reaktiivisuutta. Uusi reaktiivisuusjärjestelmä antaa Vue 3:lle mahdollisuuden käsitellä jättimäisempiä komponenttipuita tehokkaammin.

2. Pienempi nippukoko

Optimoidun koodikannan ja puun täristystuen ansiosta Vue 3:lla on pienempi nippukoko kuin Vue 2:lla. Tämä nippukoon pienentäminen johtaa nopeampiin latausaikoihin ja parempaan suorituskykyyn.

3. Parannettu koodin organisointi

Composition API: n avulla voit järjestää komponenttisi koodin pienempiin, uudelleenkäytettäviin toimintoihin. Tämä edistää parempaa ymmärrystä ja ylläpitoa, erityisesti suurille ja monimutkaisille komponenteille.

4. Komponenttien ja toimintojen uudelleenkäytettävyys

Kokoonpanotoimintoja voidaan helposti käyttää uudelleen eri komponenttien välillä, mikä helpottaa koodin jakamista ja uudelleenkäytettävien funktioiden kirjaston luomista.

5. Parempi TypeScript-tuki

Composition API tarjoaa kattavamman TypeScript-tuen, mikä mahdollistaa tarkemman tyyppipäätelmän ja helpomman tyyppiin liittyvien virheiden tunnistamisen kehityksen aikana.

Options Objectin ja Composition API: n vertailu

Nyt kun ymmärrät Compposition API: n taustalla olevan teorian, voit alkaa käyttää sitä käytännössä. Ymmärtääksemme Composition API: n edut, verrataan joitain molempien lähestymistapojen keskeisiä näkökohtia.

Reaktiiviset tiedot Vue 3:ssa

Reaktiivinen data on Vuen peruskonsepti, jonka avulla sovelluksesi tiedot voivat käynnistää päivitykset automaattisesti käyttöliittymässä.

Vue 2 perustui reaktiiviseen järjestelmään Object.defineProperty menetelmä ja luotti tietoobjektiin, joka sisältää kaikki reaktiiviset ominaisuudet.

Kun määritit data-ominaisuuden Vue-komponentin data-asetuksella, Vue kääri tietoobjektin jokaisen ominaisuuden automaattisesti gettereillä ja asettimilla, uudella ECMA Script (ES6) -ominaisuudella.

Nämä hankkijat ja asettajat seurasivat omaisuuksien välisiä riippuvuuksia ja päivittivät käyttöliittymän, kun muokkasit mitä tahansa omaisuutta.

Tässä on esimerkki siitä, kuinka luot reaktiivisia tietoja Vue 2:ssa Options-objektin avulla: