Vaadake, kuidas Vue 3-s Options API-lt Composition API-le üle minna.

Kuna Vue loojad on teatanud, et Vue 2 eluiga jõuab lõpule 31. detsembriks 2023, julgustatakse arendajaid Vue 3-le üle minema.

Selle üleminekuga kaasneb kompositsiooni API, funktsioon, mis pakub Vue rakenduste loomiseks modulaarsemat, deklaratiivsemat ja tüübikindlamat lähenemist.

Mis on kompositsiooni API?

Kompositsiooni API esindab paradigma muutust Vue komponentide kirjutamisel objekti Valikud. See arendusstiil kasutab deklaratiivsemat lähenemisviisi, mis võimaldab teil keskenduda oma Vue rakenduse loomisele, võttes samal ajal rakenduse üksikasjad välja.

Kompositsiooni API motivatsioon

Vue loojad mõistsid väljakutseid keerukate veebirakenduste loomisel objektiga Options. Projektide kasvades muutus komponendi loogika haldamine vähem skaleeritavaks ja raskemini hooldatavaks, eriti koostöökeskkondades.

Traditsiooniline Options-objekti lähenemine andis sageli tulemuseks palju komponentide omadusi, muutes koodi mõistmise ja hooldamise keeruliseks.

instagram viewer

Lisaks muutus komponentide loogika taaskasutamine erinevate komponentide vahel tülikaks. Erinevate elutsükli konksude ja meetodite hajutatud loogika muutis keerukamaks ka komponendi üldise käitumise mõistmise.

Composition API eelised

Kompositsiooni API-l on Options API ees mitmeid eeliseid.

1. Parem jõudlus

Vue 3 tutvustab uut renderdusmehhanismi, mida nimetatakse puhverserveripõhiseks reaktiivsussüsteemiks. See süsteem tagab parema jõudluse, vähendades mälutarbimist ja parandades reaktiivsust. Uus reaktiivsussüsteem võimaldab Vue 3-l tõhusamalt käsitleda hiiglaslike komponentide puid.

2. Väiksem komplekti suurus

Tänu optimeeritud koodibaasi ja puude raputamise toele on Vue 3 komplekti suurus väiksem kui Vue 2-l. Kimbu suuruse vähendamine toob kaasa kiirema laadimisaja ja parema jõudluse.

3. Täiustatud koodikorraldus

Kompositsiooni API-d võimendades saate korraldada oma komponendi koodi väiksemateks korduvkasutatavateks funktsioonideks. See soodustab paremat arusaamist ja hooldust, eriti suurte ja keerukate komponentide puhul.

4. Komponentide ja funktsioonide korduvkasutatavus

Koostamise funktsioone saab hõlpsasti erinevates komponentides uuesti kasutada, hõlbustades koodi jagamist ja korduvkasutatavate funktsioonide raamatukogu loomist.

5. Parem TypeScripti tugi

Composition API pakub põhjalikumat TypeScripti tuge, võimaldades täpsemat tüübi järeldamist ja hõlpsamini tuvastada tüübiga seotud vigu arenduse ajal.

Options Objecti ja kompositsiooni API võrdlus

Nüüd, kui mõistate Composition API teooriat, võite hakata seda praktikas kasutama. Kompositsiooni API eeliste mõistmiseks võrdleme mõlema lähenemisviisi mõningaid põhiaspekte.

Reaktiivsed andmed Vue 3-s

Reaktiivsed andmed on Vue põhikontseptsioon, mis võimaldab teie rakenduse andmete muutmisel kasutajaliideses automaatselt värskendusi käivitada.

Vue 2 põhines oma reaktiivsel süsteemil Object.defineProperty meetod ja tugines andmeobjektile, mis sisaldab kõiki reaktiivseid omadusi.

Kui määratlesite andmeatribuudi Vue komponendi andmevalikuga, mässis Vue andmeobjekti iga atribuudi automaatselt getterite ja seadjatega, uue ECMA skripti (ES6) funktsiooniga.

Need hankijad ja määrajad jälgisid atribuutide vahelisi sõltuvusi ja värskendasid kasutajaliidest, kui te mis tahes atribuuti muutsite.

Siin on näide selle kohta, kuidas saate Vue 2-s objektiga Options reaktiivseid andmeid luua.