Zistite, ako migrovať z Options API na Composition API vo Vue 3.

Keďže tvorcovia Vue oznámili, že Vue 2 dosiahne koniec životnosti do 31. decembra 2023, vývojárom sa odporúča prejsť na Vue 3.

S týmto prechodom prichádza Composition API, funkcia, ktorá ponúka modulárnejší, deklaratívnejší a typovo bezpečný prístup k vytváraniu aplikácií Vue.

Čo je to Composition API?

Composition API predstavuje zmenu paradigmy v písaní komponentov Vue objekt Možnosti. Tento štýl vývoja využíva deklaratívnejší prístup, ktorý vám umožňuje sústrediť sa na budovanie vašej aplikácie Vue a zároveň abstrahovať detaily implementácie.

Motivácia pre Composition API

Tvorcovia Vue rozpoznali výzvy pri vytváraní zložitých webových aplikácií s objektom Options. Ako projekty rástli, správa logiky komponentu bola menej škálovateľná a ťažšie sa udržiava, najmä v prostrediach spolupráce.

Tradičný objektový prístup Options často viedol k mnohým vlastnostiam komponentov, takže kód bol náročný na pochopenie a údržbu.

Opätovné použitie logiky komponentov naprieč rôznymi komponentmi sa navyše stalo ťažkopádnym. Rozptýlená logika v rámci rôznych háčikov a metód životného cyklu tiež pridala na zložitosti pochopenie celkového správania komponentu.

instagram viewer

Výhody Composition API

Composition API prináša niekoľko výhod oproti Options API.

1. Vylepšený výkon

Vue 3 predstavuje nový mechanizmus vykresľovania nazývaný Proxy-based Reactivity System. Tento systém poskytuje lepší výkon znížením spotreby pamäte a zlepšením reaktivity. Nový systém reaktivity umožňuje Vue 3 efektívnejšie manipulovať s obrovskými stromami komponentov.

2. Menšia veľkosť balíka

Vďaka optimalizovanej kódovej základni a podpore trepania stromov má Vue 3 menšiu veľkosť balíka ako Vue 2. Toto zníženie veľkosti balíka vedie k rýchlejšiemu načítaniu a zlepšeniu výkonu.

3. Vylepšená organizácia kódu

Využitím Composition API môžete organizovať kód vášho komponentu do menších, opakovane použiteľných funkcií. To podporuje lepšie pochopenie a údržbu, najmä v prípade veľkých a zložitých komponentov.

4. Opätovná použiteľnosť komponentov a funkcií

Kompozičné funkcie je možné jednoducho opätovne použiť v rôznych komponentoch, čo uľahčuje zdieľanie kódu a vytváranie knižnice opakovane použiteľných funkcií.

5. Lepšia podpora TypeScript

Composition API poskytuje komplexnejšiu podporu TypeScript, čo umožňuje presnejšie odvodzovanie typu a jednoduchšiu identifikáciu chýb súvisiacich s typom počas vývoja.

Porovnanie medzi Options Object a Composition API

Teraz, keď ste pochopili teóriu, ktorá stojí za rozhraním Composition API, môžete ho začať používať v praxi. Aby sme pochopili výhody Composition API, porovnajme niektoré kľúčové aspekty oboch prístupov.

Reaktívne dáta vo Vue 3

Reaktívne údaje sú základným konceptom vo Vue, ktorý umožňuje, aby zmeny údajov vo vašej aplikácii automaticky spúšťali aktualizácie v používateľskom rozhraní.

Vue 2 založil svoj reaktívny systém na Object.defineProperty a spoliehal sa na dátový objekt obsahujúci všetky reaktívne vlastnosti.

Keď ste v komponente Vue definovali dátovú vlastnosť s možnosťou dát, Vue automaticky zabalil každú vlastnosť do dátového objektu pomocou getterov a nastavovačov, čo je nová funkcia ECMA Script (ES6).

Tieto nástroje na získavanie a nastavovanie sledovali závislosti medzi vlastnosťami a aktualizovali používateľské rozhranie, keď ste upravili akúkoľvek vlastnosť.

Tu je príklad toho, ako vytvoríte reaktívne dáta vo Vue 2 s objektom Options: