Vzhledem k tomu, že tvůrci frameworku Vue oznámili ukončení podpory Vue 2 k 31. prosinci 2023, je vývojářům důrazně doporučeno migrovat na verzi Vue 3.
Součástí této migrace je i Composition API, nová funkce, která nabízí modulárnější, deklarativní a typově bezpečný přístup k tvorbě Vue aplikací.
Co je to Composition API?
Composition API představuje významný posun v paradigmatu psaní komponent Vue, odklánějící se od objektu Options. Tento nový způsob vývoje klade důraz na deklarativní přístup, umožňující vývojářům soustředit se na logiku a funkčnost aplikace Vue, zatímco detaily implementace jsou abstrahovány.
Motivace pro zavedení Composition API
Tvůrci Vue si byli vědomi obtíží, které se objevovaly při vývoji komplexních webových aplikací s použitím objektu Options. S růstem projektů se správa logiky komponent stávala méně škálovatelnou a obtížnější na údržbu, zejména v týmové spolupráci.
Tradiční přístup s objektovými možnostmi často vedl k tomu, že komponenty měly velké množství vlastností, což ztěžovalo pochopení a údržbu kódu.
Navíc se opakované použití logiky napříč různými komponentami ukázalo jako těžkopádné. Logika rozptýlená mezi různými hooky životního cyklu a metodami dále komplikovala celkové chování komponenty.
Výhody Composition API
Composition API přináší oproti Options API několik zásadních výhod.
1. Zvýšený výkon
Vue 3 představuje nový mechanismus vykreslování s názvem Proxy-based Reactivity System. Tento systém se vyznačuje vyšším výkonem díky snížení spotřeby paměti a zlepšení reaktivity. Nový systém reaktivity umožňuje Vue 3 efektivněji pracovat i s rozsáhlými stromovými strukturami komponent.
2. Menší velikost finálního balíčku
Díky optimalizované kódové základně a podpoře tree-shakingu má Vue 3 menší velikost finálního balíčku než Vue 2. Menší balíček vede k rychlejšímu načítání a celkově lepšímu výkonu aplikace.
3. Lepší organizace kódu
S využitím Composition API můžete kód komponenty strukturovat do menších, opakovaně použitelných funkcí. To zlepšuje přehlednost, údržbu a pochopení kódu, zvláště u velkých a složitých komponent.
4. Opětovná použitelnost komponent a funkcí
Kompoziční funkce lze snadno opakovaně používat v různých komponentách, což usnadňuje sdílení kódu a vytváření knihovny opětovně použitelných funkcí.
5. Vylepšená podpora TypeScriptu
Composition API poskytuje robustnější podporu pro TypeScript, umožňuje přesnější odvození typů a snadnější odhalování chyb souvisejících s typy během vývoje.
Porovnání objektu Options a Composition API
Nyní, když rozumíte teoretickému pozadí Composition API, můžeme se podívat na jeho praktické využití. Pro lepší pochopení výhod Composition API porovnáme klíčové aspekty obou přístupů.
Reaktivní data ve Vue 3
Reaktivní data jsou základním konceptem ve Vue, umožňujícím automatické aktualizace uživatelského rozhraní při změně dat aplikace.
Vue 2 založila svůj reaktivní systém na metodě Object.defineProperty, spoléhající se na datový objekt obsahující všechny reaktivní vlastnosti.
Když jste v komponentě Vue definovali datovou vlastnost pomocí volby `data`, Vue automaticky zabalila každou vlastnost do datového objektu pomocí getterů a setterů, což je nová funkce ECMA Script (ES6).
Tyto gettery a settery sledovaly závislosti mezi vlastnostmi a aktualizovaly uživatelské rozhraní při změně jakékoli vlastnosti.
Zde je příklad vytvoření reaktivních dat ve Vue 2 pomocí objektu Options:
<template>
<div>
<p>Počet: {{ count }}</p>
<button @click="increment">Zvýšit</button>
</div>
</template><script>
export default {
data() {
return {
count: 0,
};
},methods: {
increment() {
this.count++;
},
},
};
</script>
Tento blok kódu ukazuje, jak definovat proměnné ve Vue 2. Vue automaticky aktivuje proměnné definované v datovém objektu. Změny, které provedete ve vlastnosti dat (`count`), automaticky aktualizují uživatelské rozhraní aplikace.
Pro definování funkcí JavaScriptu používaných v rámci komponenty jste použili objekt `methods`. V tomto příkladu fragment kódu definuje metodu `increment()`, která zvýší hodnotu proměnné `count` o 1.
Při psaní funkcí jako metod ve Vue 2 bylo nutné používat klíčové slovo `this` (např. `this.count++`). Klíčové slovo `this` umožňuje odkazovat na proměnné v datovém objektu. Vynechání klíčového slova `this` by vedlo k chybě při připojování komponenty.
Systém reaktivity založený na proxy ve Vue 3 využívá pro dosažení reaktivity JavaScriptové proxy, což nabízí výrazné zvýšení výkonu a lepší správu reaktivních závislostí.
Pro definování reaktivních dat ve Vue 3 se používá funkce `ref` nebo `reactive`. Funkce `ref` vytvoří jeden reaktivní odkaz na hodnotu, zatímco funkce `reactive` vytvoří reaktivní objekt s více vlastnostmi.
Zde je příklad vytvoření reaktivních dat pomocí funkce `ref` ve Vue 3:
<script setup>
import { ref } from 'vue';const count = ref(0);
function increment() {
count.value++;
}
</script><template>
<div>
<p>Počet: {{ count }}</p>
<button @click="increment">Zvýšit</button>
</div>
</template>
Pro použití funkce `ref()` ve Vue 3 ji musíte nejprve importovat z balíčku vue. Funkce `ref()` vytváří reaktivní odkazy na proměnné.
Příklad bloku kódu vytváří proměnnou `count` pomocí funkce `ref()` a nastavuje její počáteční hodnotu na 0. Funkce `ref()` vrací objekt s vlastností `value`. Tato vlastnost `value` uchovává skutečnou hodnotu proměnné `count`.
Direktiva `@click` se používá pro zpracování událostí kliknutí ve Vue.
Funkce potřebné v komponentě definujete v bloku nastavení skriptu. Vue 3 nahradilo syntaxi `methods` pro definování funkcí ve Vue 2 běžnými JavaScriptovými funkcemi.
Nyní můžete přistupovat k reaktivním proměnným definovaným pomocí funkce `ref()` připojením metody `value` k názvu proměnné. Například blok kódu používá `count.value` pro odkazování na hodnotu proměnné `count`.
Funkce Computed ve Vue 3
Funkce `computed` je další funkcí Vue, která umožňuje definovat odvozené hodnoty založené na reaktivních datech. Vypočítané vlastnosti se automaticky aktualizují při každé změně svých závislostí, čímž zajišťují, že odvozená hodnota je vždy aktuální.
Ve Vue 2 se vypočítané chování definovalo pomocí volby `computed` v rámci komponenty. Zde je příklad:
<template>
<div>
<p>Počet: {{ count }}</p>
<p>Dvojnásobný počet: {{ doubleCount }}</p>
<button @click="incrementCount">Zvýšit počet</button>
</div>
</template><script>
export default {
data() {
return {
count: 0
};
},
computed: {
doubleCount() {
return this.count * 2;
}
},
methods: {
incrementCount() {
this.count++;
}
}
};
</script>
V uvedeném příkladu závisí vypočítaná vlastnost `doubleCount` na vlastnosti `count` z dat. Vždy, když se vlastnost `count` změní, Vue přepočítá vlastnost `doubleCount`.
Ve Vue 3 zavádí Composition API nový způsob definování vypočítaných vlastností pomocí funkce `computed`. Vypadá to takto:
<script setup>
import { ref, computed } from 'vue';const count = ref(0);
const doubleCount = computed(() => count.value * 2);const incrementCount = () => {
count.value++;
};
</script><template>
<div>
<p>Počet: {{ count }}</p>
<p>Dvojnásobný počet: {{ doubleCount }}</p>
<button @click="incrementCount">Zvýšit počet</button>
</div>
</template>
Než můžete funkci použít, musíte importovat funkci `computed` z balíčku vue.
V bloku kódu výše jste definovali vypočítaný ref `doubleCount` pomocí funkce `computed`. Vue 3 odkazuje na vypočítané vlastnosti jako na vypočítané reference, čímž zdůrazňuje jejich závislost na reaktivních proměnných.
Funkce `computed` přijímá jako argument funkci getter, která vypočítává odvozenou hodnotu na základě reaktivních dat. V tomto případě vypočítaný ref `doubleCount` vrací výsledek násobení reaktivní proměnné `count` číslem 2.
Je zřejmé, že bloky kódu založené na Composition API jsou čitelnější a stručnější než bloky psané pomocí objektu Options.
Naučte se vytvářet vlastní direktivy ve Vue
Vue 3 Composition API představuje efektivní a flexibilní přístup k organizaci a opětovnému použití kódu v komponentách Vue. S využitím Composition API můžete vytvářet modulárnější a lépe udržovatelné Vue aplikace.
Vue nabízí také další funkce, které vám pomohou maximalizovat produktivitu při vývoji webových aplikací. Můžete se naučit vytvářet vlastní direktivy pro opětovné použití specifických funkcí v různých částech vaší aplikace Vue.