Uzziniet, kā Vue 3 migrēt no Options API uz Composition API.

Tā kā Vue veidotāji ir paziņojuši, ka Vue 2 mūža beigas sasniegs līdz 2023. gada 31. decembrim, izstrādātāji tiek aicināti pāriet uz Vue 3.

Līdz ar šo pāreju nāk kompozīcijas API — funkcija, kas piedāvā modulārāku, deklaratīvāku un drošāku pieeju Vue lietojumprogrammu veidošanai.

Kas ir kompozīcijas API?

Kompozīcijas API atspoguļo paradigmas maiņu Vue komponentu rakstīšanā no objektu Opcijas. Šis izstrādes stils izmanto deklaratīvāku pieeju, ļaujot jums koncentrēties uz Vue lietotnes izveidi, vienlaikus novēršot ieviešanas detaļas.

Kompozīcijas API motivācija

Vue veidotāji apzinājās izaicinājumus, veidojot sarežģītas tīmekļa lietojumprogrammas ar opciju objektu. Projektiem augot, komponenta loģikas pārvaldība kļuva mazāk mērogojama un grūtāk uzturējama, īpaši sadarbības vidēs.

Tradicionālā Opciju objekta pieeja bieži vien radīja daudzas komponentu īpašības, padarot kodu sarežģītu uztvert un uzturēt.

Turklāt komponentu loģikas atkārtota izmantošana dažādos komponentos kļuva apgrūtinoša. Izkliedētā loģika dažādos dzīves cikla āķos un metodēs arī sarežģīja komponenta vispārējās uzvedības izpratni.

instagram viewer

Kompozīcijas API priekšrocības

Kompozīcijas API sniedz vairākas priekšrocības salīdzinājumā ar opciju API.

1. Uzlabota veiktspēja

Vue 3 ievieš jaunu renderēšanas mehānismu, ko sauc par starpniekservera reaktivitātes sistēmu. Šī sistēma nodrošina labāku veiktspēju, samazinot atmiņas patēriņu un uzlabojot reaktivitāti. Jaunā reaktivitātes sistēma ļauj Vue 3 efektīvāk apstrādāt milzīgus komponentu kokus.

2. Mazāks komplekta izmērs

Pateicoties optimizētajai kodu bāzei un koku kratīšanas atbalstam, Vue 3 komplekta izmērs ir mazāks nekā Vue 2. Šis komplekta izmēra samazinājums nodrošina ātrāku ielādes laiku un uzlabotu veiktspēju.

3. Uzlabota koda organizācija

Izmantojot kompozīcijas API, varat sakārtot komponenta kodu mazākās, atkārtoti lietojamās funkcijās. Tas veicina labāku izpratni un apkopi, īpaši lieliem un sarežģītiem komponentiem.

4. Komponentu un funkciju atkārtota izmantošana

Kompozīcijas funkcijas var viegli atkārtoti izmantot dažādos komponentos, atvieglojot koda koplietošanu un atkārtoti lietojamu funkciju bibliotēkas izveidi.

5. Labāks TypeScript atbalsts

Kompozīcijas API nodrošina visaptverošāku TypeScript atbalstu, ļaujot precīzāk secināt par tipu un vieglāk identificēt ar tipu saistītas kļūdas izstrādes laikā.

Opciju objekta un kompozīcijas API salīdzinājums

Tagad, kad esat izpratis Composition API teoriju, varat sākt to izmantot praksē. Lai izprastu kompozīcijas API priekšrocības, salīdzināsim dažus abu pieeju galvenos aspektus.

Reaktīvie dati Vue 3

Reaktīvie dati ir Vue pamatjēdziens, kas ļauj datu izmaiņām jūsu lietojumprogrammā automātiski aktivizēt lietotāja saskarnes atjauninājumus.

Vue 2 savu reaktīvo sistēmu balstīja uz Object.defineProperty metodi un paļāvās uz datu objektu, kas satur visas reaktīvās īpašības.

Kad Vue komponentā definējāt datu rekvizītu ar datu opciju, Vue automātiski ietvēra katru rekvizītu datu objektā ar ieguvējiem un iestatītājiem, jaunu ECMA skripta (ES6) līdzekli.

Šie ieguvēji un iestatītāji izsekoja atkarības starp rekvizītiem un atjaunināja lietotāja saskarni, kad modificējāt kādu īpašumu.

Tālāk ir sniegts piemērs, kā izveidot reaktīvus datus Vue 2, izmantojot objektu Opcijas: