Vue.js poskytuje mechanismus pro sledování změn ve stavu aplikace. Tato funkce se nazývá “watcher” a umožňuje monitorovat změny reaktivních vlastností a vykonávat vlastní logiku v reakci na tyto změny.
Co je Watcher?
Watcher ve Vue.js je funkce, která sleduje reaktivní vlastnost (např. ref nebo reactive) a spustí callback pokaždé, když se hodnota této vlastnosti změní. Watchery se často používají pro úlohy, jako jsou:
- Logování změn stavu
- Spouštění vedlejších efektů (např. síťové požadavky)
- Synchronizace stavu mezi komponentami nebo externími systémy
Implementace Watcheru: Krok za krokem
Projděme si příklad, abychom lépe pochopili, jak watchery fungují.
Základní nastavení
Nejprve vytvořte aplikaci Vue.js a definujte reaktivní vlastnost. Na každé kliknutí na tlačítko se hodnota count zvýší a změna se zaloguje do konzole.
<div id="app">
<div>Count: {{ count }}</div>
<button @click="count++">Klikni</button>
</div>
<script>
const { createApp, ref, watch } = Vue;
createApp({
setup() {
const count = ref(0); // Inicializace reaktivní vlastnosti
watch(count, (newValue, oldValue) => {
console.log(`Count changed: New = ${newValue}, Old = ${oldValue}`);
});
return { count };
},
}).mount("#app");
</script>
Reaktivní vlastnost (ref): Vlastnost count inicializujeme s hodnotou ref(0).
Watcher: Funkce watch sleduje vlastnost count a loguje její nové a staré hodnoty při každé změně.
Sledování komplexnějších datových struktur
Reaktivní vlastnosti mohou být také objekty. Například:
const count = ref({ number: 0, otherProp: "Hello" });
Pokud budeme sledovat tento objekt přímo, můžeme narazit na problémy. Například:
watch(count, (newValue, oldValue) => {
console.log(`New: ${newValue}, Old: ${oldValue}`);
});
Nová hodnota (newValue) a stará hodnota (oldValue) se nemusí aktualizovat podle očekávání, protože Vue sleduje objekty odlišně. K opravě tohoto problému sledujte konkrétní vlastnosti pomocí getter funkce:
const count = ref({ number: 0, otherProp: "Hello" });
watch(() => count.value.number, (newValue, oldValue) => {
console.log(`Number changed: New = ${newValue}, Old = ${oldValue}`);
});
Pokud sledujeme celý objekt, mohou nastat problémy, protože Vue sleduje objekty jinak. Proto je lepší sledovat konkrétní vlastnosti pomocí getterů.
Použití reactive místo ref
Pro méně verbózní kód zvažte použití reactive:
const count = reactive({ number: 0, otherProp: "Hello" });
watch(() => [count.number, count.otherProp], ([newNum, newOther], [oldNum, oldOther]) => {
console.log(`Number: New = ${newNum}, Old = ${oldNum}`);
console.log(`OtherProp: New = ${newOther}, Old = ${oldOther}`);
});
Výhody reactive:
- Nemusíte používat
.value. - Vlastnosti jsou automaticky rozbaleny.
Sledování více vlastností
Watchery mohou sledovat více vlastností najednou. Stačí předat pole:
watch(
() => [count.number, count.otherProp],
([newNum, newOther], [oldNum, oldOther]) => {
console.log(`Number changed: New = ${newNum}, Old = ${oldNum}`);
console.log(`OtherProp changed: New = ${newOther}, Old = ${oldOther}`);
}
);
Tento watcher se spustí pokaždé, když se změní count.number nebo count.otherProp.
Kdy používat Watchery?
Watchery jsou ideální pro situace, kdy potřebujete reagovat na změny reaktivních dat bez přímého propojení logiky se šablonou. Typické případy použití zahrnují:
- Načítání dat při změně hodnoty (např. filtrování seznamu).
- Debounce nebo throttle vstupů.
- Sledování specifických změn stavu pro analytiku.
Nejlepší praktiky
- Omezte nadměrné používání: Pokud je to možné, použijte computed vlastnosti nebo
v-model pro jednodušší reaktivitu. - Buďte konkrétní: Sledujte specifické části komplexních objektů pomocí getterů.
- Používejte
reactive: Pro práci s objekty preferujte reactive kvůli jednodušší syntaxi. - Kombinujte s lifecycle hooky: Watchery mohou být efektivně integrovány do životního cyklu komponent.
Video
Nerad čteš, tak mrkni na video 👇
Play