Zásadní body
- JavaScriptové frameworky, jako je Vue, poskytují funkce jako komponentová architektura, management stavu a směrování, což výrazně usnadňuje vývoj webových aplikací.
- Vue watchery jsou mechanismy, které monitorují reaktivní vlastnosti a umožňují reagovat na změny dat a události.
- V porovnání s vypočítanými vlastnostmi jsou watchery sice flexibilní, ale vypočítané vlastnosti nabízejí stručnější a čitelnější kód, což se promítá do lepšího výkonu a jednoduššího ladění.
JavaScriptové frameworky se staly klíčovou součástí moderního webového vývoje. Jejich snadno dostupné funkce, včetně komponentové struktury, správy stavu a routování, pomáhají snížit zátěž, úsilí a čas nutný k vytvoření webové aplikace od začátku.
Vue, jeden z těchto frameworků, nabízí řadu nástrojů pro urychlení vývoje. Funkce sledování umožňuje sledovat proměnné a výrazy během provádění programu a reagovat na jejich změny.
Co jsou Watchery ve Vue?
Vue watchery jsou specifické funkce, které sledují změny v reaktivních datech a automaticky reagují na tyto změny. Umožňují efektivně reagovat na modifikace dat a různé události.
Pro použití watcheru je třeba importovat funkci `watch` z balíčku `vue` v kódu:
<script setup>
import { watch } from 'vue';
</script>
Nyní je možné použít funkci `watch` pro implementaci pozorovatele do komponenty Vue. Následuje jednoduchý příklad:
<template>
<div>
<p>{{ user }}</p>
<button @click="changeName">Změnit jméno</button>
</div>
</template><script setup>
import { ref, watch } from 'vue';const user = ref('Chinedu');
const changeName = () => {
user.value="Victor"; // Změní jméno uživatele
};watch(user, (newUser, oldUser) => {
alert(`Jméno uživatele se změnilo z "${oldUser}" na "${newUser}"`);
});
</script>
Tato základní komponenta využívá funkci `watch` ke sledování změn v uživatelském jménu. HTML šablona definuje strukturu komponenty, včetně odstavce (`p`), který zobrazuje hodnotu reaktivní proměnné `user`. Dále obsahuje tlačítko, na které je navázána funkce `changeName` pro změnu jména uživatele.
Když se hodnota proměnné `user` změní, Vue aktivuje zpětnou volací funkci. Tato funkce zobrazí upozornění: „Jméno uživatele se změnilo z „Chinedu“ na „Victor“.
Porovnání Watcherů s Vypočítanými Vlastnostmi
Je klíčové pochopit rozdíl mezi watchery a vypočítanými vlastnostmi. Přestože oba nástroje slouží pro reaktivitu ve Vue, měly by se používat pro různé situace.
Například, výpočet součtu věku otce a syna pomocí watcherů může vypadat takto:
<template>
<input type="text" placeholder="Věk otce" v-model="father">
<input type="text" placeholder="Věk syna" v-model="son">
<p>Celkový věk: {{ total }}</p>
</template><script setup>
import { ref, watch } from 'vue';const father = ref();
const son = ref();
const total = ref();watch(son, (newAge, oldAge) => {
total.value = Number(father.value) + Number(newAge)
})watch(father, (newAge, oldAge) => {
total.value = Number(newAge) + Number(son.value)
})</script>
Tato komponenta Vue využívá watchery k vypočítání součtu věku otce a syna. Za tímto účelem vytvoří novou reaktivní proměnnou `total`. Reaktivní proměnné se vytvářejí při použití Vue Composition API.
Kód dále využívá dvě funkce `watch` ke sledování věku syna a otce. Pro každý věk, ať už otce, nebo syna, sečte novou hodnotu s aktuálním věkem druhého. Výsledek se pak uloží do celkové reaktivní proměnné `total`.
Zvažte stejný scénář s použitím vypočítaných vlastností:
<template>
<input type="text" placeholder="Věk otce" v-model="father">
<input type="text" placeholder="Věk syna" v-model="son">
<p>Celkový věk: {{ total }}</p>
</template><script setup>
import { ref , computed } from 'vue';const father = ref();
const son = ref();const total = computed(() => {
return Number(father.value) + Number(son.value);
});</script>
Tento kód je mnohem stručnější a lépe čitelný. Vypočítá součet věku otce a syna a uloží jej do vypočítané proměnné `total`. HTML šablona poté zobrazuje hodnotu proměnné `total` pomocí interpolace, což je technika vázání dat ve Vue.
Přestože je možné vypočítat součet pomocí watcherů, je vhodnější použít pro tento účel vypočítané vlastnosti. Použití watcherů v takovém případě může vést k pomalejšímu načítání a složitějšímu ladění, protože vyžaduje více kódu.
Watchery by se neměly používat jako náhrada za vypočítané vlastnosti. Pro odvození nových dat ze stávajících reaktivních dat používejte vypočítané vlastnosti. Watchery používejte ke sledování a reakci na změny dat.
Další možností je konfigurace `immediate`, kterou lze použít při vytváření watcheru. Tato možnost určuje, zda se má zpětná volací funkce spustit ihned po připojení komponenty Vue.
Zde je příklad komponenty, která využívá watcher s možností `immediate`:
<script setup>
import { ref, watch } from 'vue';const count = ref(10);
watch(
count,
(newCount, oldCount) => {
console.log(`Počet se změnil z ${oldCount} na ${newCount}`);
},
{ immediate: true }
); </script>
Ve výše uvedeném kódu se zpětná volací funkce spustí ihned po inicializaci komponenty a zapíše do konzole „Počet se změnil z nedefinovaného na 10“. To ukazuje, že počáteční hodnota byla nedefinovaná, než Vue přiřadila hodnotu 10 proměnné `count`.
Možnost `immediate` je užitečná v případech, kdy potřebujete provést inicializační akce na základě aktuální hodnoty sledované vlastnosti, například, když má vaše aplikace načíst data z API, jakmile se komponenta Vue připojí.
Možnost `deep` dostupná ve Vue Watcherech
Možnost `deep`, kterou lze použít při práci s watchery ve Vue, umožňuje sledování změn ve vnořených objektech nebo polích. Pokud je nastavena na `true`, watcher dokáže detekovat změny i ve vnořených vlastnostech.
Následuje příklad komponenty Vue s možností `deep`:
<script setup>
import { ref, watch } from 'vue';const data = ref({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Data se změnila`);
},
{ deep: true }
);// Spustí watcher, protože jde o hlubokou změnu
data.value.length = 43;
</script>
Tento kód inicializuje reaktivní proměnnou `data` s objektem, který obsahuje vlastnost `length`. Možnost `deep` je nastavena na `true`. Následně se zapíše do konzole, že se data změnila po změně hodnoty vlastnosti `length` na 43.
Bez možnosti `deep` nastavené na `true`, funkce `watch` by si nevšimla žádné změny v objektu. Vue však sleduje všechny vnořené změny, i bez možnosti `deep`, pokud inicializujete proměnnou `data` jako reaktivní objekt:
<script setup>
import { reactive, watch } from 'vue';const data = reactive({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Data se změnila`);
}
);// Spustí watcher, protože mění reaktivní objekt
data.length = 43;
</script>
Funkce `watch` v tomto kódu zapíše do konzole, že se data změnila, protože proměnná `data` je reaktivní objekt.
Vytvářejte Lepší Aplikace s Vue Watchery
Vue watchery vám umožňují dosáhnout jemnozrnné reaktivity ve vašich aplikacích. Umožňují kontrolovat sledování změn ve vlastnostech dat a spouštět na základě toho vlastní logiku.
Pochopení toho, kdy použít watchery, jak se liší od vypočítaných vlastností a jak využívat možnosti jako `immediate` a `deep`, vám může výrazně pomoci při vytváření velmi citlivých aplikací Vue.