Vue.js 3 zavádí Composition API, které nabízí nový způsob strukturování a psaní kódu. Pro ty, kteří přecházejí z Vue 2, zůstává však dostupné i Options API.
Tento článek zkoumá, jak pracovat s funkcemi a metodami ve Vue 3 pomocí obou přístupů a zdůrazňuje jejich rozdíly.
Psání funkcí ve Vue 3
Funkce jsou znovupoužitelné bloky kódu, které vrací hodnotu nebo provádí operaci. Ve Vue 3 můžete definovat funkce pomocí tradiční syntaxe JavaScriptu nebo moderních ES6 arrow funkcí.
Příklad: Použití funkce s Composition API
Zde je jednoduchý příklad definování a používání funkce ve Vue 3:
setup() {
const message = () => {
return 'Hello Vue 3';
};
return {
message,
};
}Tato funkce
message je definována uvnitř funkce setup(), což je základní kámen Composition API. Pro použití této funkce v šabloně:<p>Message: {{ message() }}</p>Je důležité volat funkci (pomocí
()), protože pokud to neuděláte, vytiskne se samotná funkce místo jejího výsledku. Metody ve Vue 3
Vue 3 také podporuje metody, které jsou definovány mimo funkci
setup(). Tyto metody patří k Options API, což je přístup zděděný z Vue 2.Příklad: Definování metod pomocí Options API
Zde je ukázka, jak definovat metodu:
methods: {
countUsers() {
return 10;
}
}Pro použití této metody v šabloně:
<p>Users: {{ countUsers() }}</p> Kombinace Composition API a Options API
Vue 3 umožňuje kombinovat Composition API a Options API v jedné komponentě. Funkce specifické pro Composition API však nelze používat v rámci Options API a naopak.
V následujícím příkladu funkce
message používá Composition API, zatímco countUsers používá Options API:const app = Vue.createApp({
setup() {
const message = () => {
return 'Hello Vue 3';
};
return {
message,
};
},
methods: {
countUsers() {
return 10;
}
}
}); Výstup příkladu
Po připojení k DOM elementu aplikace vykreslí:
<div id="app">
<p>Message: Hello Vue 3</p>
<p>Users: 10</p>
</div> Klíčové rozdíly mezi funkcemi a metodami
Proč zvolit Composition API?
I když mohou oba přístupy koexistovat, Composition API je ve Vue 3 obecně preferováno, protože:
• Umožňuje lepší organizaci související logiky v jedné funkci
• Zjednodušuje složité komponenty modularizací logiky do znovupoužitelných funkcí
• Je to přístup zaměřený na budoucnost, nabízející větší flexibilitu a integraci s novými funkcemi Vue 3
Závěr
Vue 3 poskytuje vývojářům dva odlišné přístupy: Composition API pro moderní, modulární vývoj a Options API pro zpětnou kompatibilitu a jednoduchost.
S vývojem Vue 3 se Composition API pravděpodobně stane standardem pro většinu projektů, ale Options API zůstává cenným nástrojem pro údržbu stávajících aplikací.
Video
Nerad čteš, tak mrkni na video 👇