Vypočítané vlastnosti v Vue.js
Ponoříme se do vypočítaných vlastností ve Vue.js prostřednictvím jednoduchého příkladu, identifikujeme běžný problém a naučíme se, jak jej vypočítané vlastnosti mohou vyřešit. Vypočítané vlastnosti pomáhají zlepšit výkon tím, že zabraňují zbytečným spuštěním funkcí během aktualizací reaktivity.
Problém: Spouštění zbytečných funkcí
Představme si aplikaci Vue.js, kde:
• Tlačítko přepíná stav „aktivní“ a zobrazuje aktuální stav.
• Aplikace zobrazí uvítací zprávu „Hello John“, pokud je uživatel John, nebo „Hello Guest“ jinak.
Přestože to vypadá jednoduše, problém nastává, když se při aktualizaci reaktivity spouštějí i funkce nesouvisející s upravenou vlastností. Pojďme tento problém krok za krokem vyřešit pomocí vypočítaných vlastností.
Vytvoření aplikace
Krok 1: Nastavení vstupu a zobrazení zprávy
Začneme základním nastavením:
<div id="app">
<input type="text" v-model="data.user">
<button @click="toggleActive">Změnit stav</button>
<hr>
<div>Zpráva: {{ message }}</div>
<div>Aktivní: {{ isActive }}</div>
</div>
Ve funkci setup() definujeme data jako ref, abychom uchovali reaktivní vlastnosti, a vytvoříme dvě funkce: message pro vyhodnocení vstupu uživatele a isActive pro kontrolu stavu:
const data = ref({
user: "",
active: false,
});
function message() {
return data.value.user === "John" ? "Hello John" : "Hello Guest";
}
function isActive() {
return data.value.active ? "Active" : "Inactive";
}
Krok 2: Přepínání aktivního stavu
Pro přepnutí aktivního stavu přidáme tlačítko a funkci:
<button @click="toggleActive">Změnit stav</button>
function toggleActive() {
data.value.active = !data.value.active;
}
Krok 3: Pozorování problému
Do konzole zapíšeme spouštění funkcí:
console.log("message triggered");
console.log("isActive triggered");
Po spuštění aplikace si všimneme následujícího:
• Funkce message se spustí i tehdy, když se změní pouze aktivní stav.
• Funkce isActive se spustí při psaní do vstupního pole.
Toto chování je způsobeno tím, že reaktivní systém Vue aktualizuje celou komponentu při změně jakékoli vlastnosti, což způsobuje znovuspuštění všech funkcí.
Řešení: Použití vypočítaných vlastností
Vypočítané vlastnosti tento problém řeší tím, že vytvářejí závislosti. Vypočítaná vlastnost se aktualizuje pouze tehdy, když se změní data, na kterých závisí.
Krok 1: Refaktorování funkcí do vypočítaných vlastností
Nahradíme funkce message a isActive vypočítanými vlastnostmi:
const message = computed(() => {
console.log("message triggered");
return data.value.user === "John" ? "Hello John" : "Hello Guest";
});
const isActive = computed(() => {
console.log("isActive triggered");
return data.value.active ? "Active" : "Inactive";
});
Krok 2: Aktualizace šablony
Šablona zůstává beze změn, protože message a isActive lze nadále používat stejným způsobem:
<div>Zpráva: {{ message }}</div>
<div>Aktivní: {{ isActive }}</div>
Krok 3: Pozorování vylepšení
Po opětovném načtení aplikace a testování si všimneme výhod:
• Vypočítaná vlastnost message se spustí pouze při změně vstupu uživatele.
• Vypočítaná vlastnost isActive se spustí pouze při změně aktivního stavu.
Proč jsou vypočítané vlastnosti důležité
Klíčové výhody:
• Optimalizace výkonu: Zabraňuje zbytečnému volání funkcí při aktualizacích.
• Deklarativní závislosti: Vypočítané vlastnosti se znovu vyhodnocují pouze při změně závislých dat.
• Zjednodušení kódu: Kód je přehlednější a snáze pochopitelný.
Kdy používat vypočítané vlastnosti
Použijte vypočítané vlastnosti, když:
• Potřebujete provést odvozené výpočty nebo logiku založenou na reaktivních datech.
• Chcete optimalizovat výkon v komplexních aplikacích.
• Usilujete o čistší a lépe udržovatelný kód.
Závěr
Vypočítané vlastnosti ve Vue.js jsou mocným nástrojem pro efektivní správu výkonu a reaktivity. Zatímco jednoduché aplikace je nemusí potřebovat, ve složitějších scénářích, kde se pracuje s náročnými operacemi nebo více reaktivními závislostmi, se stávají nepostradatelnými.
Video
Nerad čteš, tak mrkni na video 👇
Play