Přečtěte si, jak migrovat z Options API na Composition API ve Vue 3.

Vzhledem k tomu, že tvůrci Vue oznámili, že Vue 2 dosáhne konce životnosti do 31. prosince 2023, vývojářům se doporučuje přejít na Vue 3.

S tímto přechodem přichází Composition API, funkce, která nabízí modulárnější, deklarativní a typově bezpečný přístup k vytváření aplikací Vue.

Co je to Composition API?

Composition API představuje posun paradigmatu v psaní komponent Vue objekt Možnosti. Tento styl vývoje využívá více deklarativní přístup, který vám umožňuje soustředit se na vytváření vaší aplikace Vue a zároveň abstrahovat detaily implementace.

Motivace pro Composition API

Tvůrci Vue rozpoznali výzvy při vytváření složitých webových aplikací s objektem Options. Jak projekty rostly, správa logiky komponenty byla méně škálovatelná a obtížnější se udržovat, zejména v prostředích spolupráce.

Tradiční objektový přístup Options často vedl k mnoha vlastnostem komponent, takže kód byl náročný na pochopení a údržbu.

Opětovné použití logiky součástí napříč různými součástmi se navíc stalo těžkopádným. Rozptýlená logika v rámci různých háčků a metod životního cyklu také přidala na složitosti pochopení celkového chování komponenty.

instagram viewer

Výhody Composition API

Composition API přináší několik výhod oproti Options API.

1. Zlepšený výkon

Vue 3 zavádí nový renderovací mechanismus nazvaný Proxy-based Reactivity System. Tento systém poskytuje lepší výkon snížením spotřeby paměti a zlepšením reaktivity. Nový systém reaktivity umožňuje Vue 3 efektivněji zpracovávat více obřích komponentových stromů.

2. Menší velikost balíčku

Díky optimalizované kódové základně a podpoře protřepávání stromů má Vue 3 menší velikost balíčku než Vue 2. Toto zmenšení velikosti balíku vede k rychlejšímu načítání a lepšímu výkonu.

3. Vylepšená organizace kódu

Využitím Composition API můžete uspořádat kód komponenty do menších, opakovaně použitelných funkcí. To podporuje lepší porozumění a údržbu, zejména u velkých a složitých součástí.

4. Opětovná použitelnost komponent a funkcí

Kompoziční funkce lze snadno znovu použít v různých komponentách, což usnadňuje sdílení kódu a vytváření knihovny opakovaně použitelných funkcí.

5. Lepší podpora TypeScript

Composition API poskytuje komplexnější podporu TypeScript, umožňuje přesnější odvození typu a snadnější identifikaci chyb souvisejících s typem během vývoje.

Porovnání mezi objektem Options a rozhraním Composition API

Nyní, když rozumíte teorii, která stojí za Composition API, můžete jej začít používat v praxi. Abychom pochopili výhody Composition API, porovnejme některé klíčové aspekty obou přístupů.

Reaktivní data ve Vue 3

Reaktivní data jsou základním konceptem ve Vue, který umožňuje, aby změny dat ve vaší aplikaci automaticky spouštěly aktualizace v uživatelském rozhraní.

Vue 2 založil svůj reaktivní systém na Object.defineProperty a spoléhal na datový objekt obsahující všechny reaktivní vlastnosti.

Když jste definovali datovou vlastnost s možností data v komponentě Vue, Vue automaticky zabalila každou vlastnost do datového objektu pomocí getterů a nastavovačů, což je nová funkce ECMA Script (ES6).

Tyto gettry a settery sledovaly závislosti mezi vlastnostmi a aktualizovaly uživatelské rozhraní, když jste upravili jakoukoli vlastnost.

Zde je příklad toho, jak vytváříte reaktivní data ve Vue 2 pomocí objektu Options: