Table of Contents
Klíčové věci
- Frameworky JavaScriptu, jako je Vue, nabízejí funkce, jako je architektura komponent, správa stavu a směrování, které zjednodušují vývoj webových aplikací.
- Vue watchers jsou funkce, které sledují změny reaktivních vlastností a umožňují reagovat na události a úpravy dat.
- Při porovnání hlídačů s vypočítanými vlastnostmi jsou vypočítané vlastnosti stručnější a lépe čitelné, což vede k lepšímu výkonu a ladění.
JavaScriptové rámce se staly důležitou součástí vývoje webu. To je způsobeno jejich snadno dostupnými funkcemi, včetně architektury komponent, správy stavu a směrování. Ty pomáhají snížit stres, úsilí a čas potřebný k vytvoření webové aplikace od začátku.
Vue, jeden z těchto frameworků, nabízí mnoho funkcí pro urychlení vývoje. Funkce sledování vám umožňuje sledovat hodnoty proměnných a výrazů během provádění programu.
Co jsou Watchers ve Vue?
Vue watchers jsou funkce, které monitorují změny v reaktivní vlastnosti a odpovídajícím způsobem reagují. Watchers vám umožní reagovat na události a úpravy dat.
Chcete-li použít watcher, importujte funkci watch z balíčku vue ve vašem skriptu:
<script setup>
import { watch } from 'vue';
</script>
Nyní můžete použít funkci sledování k implementaci pozorovatele do vaší komponenty Vue. Zde je jednoduchý příklad:
<template>
<div>
<p>{{ user }}</p>
<button @click="changeName">Change Name</button>
</div>
</template><script setup>
import { ref, watch } from 'vue';const user = ref('Chinedu');
const changeName = () => {
user.value="Victor"; // Change the user's name
};watch(user, (newUser, oldUser) => {
alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
</script>
Tato jednoduchá součást využívá funkci watch ke sledování změny uživatelského jména. Sekce šablony úryvku definuje strukturu HTML komponenty, která zahrnuje značku ap, která zobrazuje hodnotu uživatelské reaktivní proměnné.
Šablona také obsahuje prvek tlačítka s funkcí changeName připojenou k posluchači události kliknutí. Když se uživatelská proměnná změní, Vue spustí funkci zpětného volání. Funkce zpětného volání zobrazí upozornění: „Uživatelské jméno se změnilo z „Chinedu“ na „Victor“.
Porovnání Watcherů s vypočtenými vlastnostmi
Je důležité pochopit rozdíl mezi pozorovateli a vypočítanými vlastnostmi. Ačkoli se oba používají jako nástroje reaktivity ve Vue, měli byste je používat pro různé účely.
Můžete například vypočítat součet věku otce a syna s pozorovateli takto:
<template>
<input type="text" placeholder="Father's Age" v-model="father">
<input type="text" placeholder="Son's Age" v-model="son">
<p>Total Age: {{ 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 používá pozorovatele k získání součtu věku otce a syna. K tomu vytvoří novou reaktivní proměnnou, celkem. Můžete vytvořit reaktivní proměnnou, když používáte Vue Composition API.
Úryvek pak využívá dvě funkce hodinek ke sledování věku syna a otce. Pro každý věk, ať už otce nebo syna, úryvek sčítá novou hodnotu s věkem druhého. Výsledek pak uloží do celkové reaktivní proměnné.
Zvažte stejný scénář ve výše uvedeném úryvku jako ten, který používá vypočítané vlastnosti:
<template>
<input type="text" placeholder="Father's Age" v-model="father">
<input type="text" placeholder="Son's Age" v-model="son">
<p>Total Age: {{ 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 úryvek je oproti předchozímu stručnější a snáze se čte. Úryvek získá součet věku otce a syna a uloží jej do vypočítaného ref (proměnné), celkem. Sekce šablony pak zobrazuje celkovou proměnnou pomocí interpolace, techniky vazby dat ve Vue.
I když můžete získat součet těchto dvou věků pomocí pozorovatelů, je lepší tak učinit s vypočítanými vlastnostmi. Použití hlídačů v této situaci může vést k pomalejšímu načítání a těžšímu ladění jednoduše proto, že to vyžaduje více kódu.
Nepoužívejte hlídače jako náhradu za vypočítané vlastnosti. Chcete-li ze stávajících reaktivních dat odvodit nová data, použijte sledovače ke sledování a reakci na změny dat a vypočítané vlastnosti.
Okamžitou možností je konfigurace, kterou můžete použít při vytváření hlídače. Tato možnost určuje, zda má pozorovatel spustit zpětné volání ihned poté, co Vue připojí komponentu.
Zde je příklad komponenty používající watcher s okamžitou možností:
<script setup>
import { ref, watch } from 'vue';const count = ref(10);
watch(
count,
(newCount, oldCount) => {
console.log(`Count changed from ${oldCount} to ${newCount}`);
},
{ immediate: true }
);
</script>
Ve výše uvedeném úryvku pozorovatel provede zpětné volání ihned po inicializaci komponenty a zaznamená do konzole „Počet se změnil z nedefinovaného na 10“. To ukazuje, že počáteční proměnná byla nedefinovaná předtím, než Vue vložila hodnotu 10 do ref. počtu.
Okamžitá možnost může být užitečná ve scénářích, kde chcete provést počáteční akci nebo inicializaci na základě aktuální hodnoty sledované vlastnosti. Například, když potřebujete, aby vaše aplikace načítala data z API, jakmile Vue připojí komponentu.
The Deep Option k dispozici ve Vue Watchers
Možnost hloubka dostupná při práci s pozorovateli ve Vue umožňuje hluboké pozorování změn ve vnořených objektech nebo polích. Při nastavení na hodnotu true může pozorovatel detekovat změny ve vnořených vlastnostech.
Zde je 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 changed"`);
},
{ deep: true }
);// This will trigger the watcher because it's a deep change
data.value.length = 43;
</script>
Fragment výše inicializuje datový odkaz s objektem obsahujícím vlastnost length. Úryvek nastaví možnost deep na true. Poté zaznamená do konzoly, že se data změnila od doby, kdy se vlastnost length změnila na 43.
Bez možnosti deep nastavené na hodnotu true si funkce sledování nevšimne žádné změny objektu. Vue však sleduje všechny vnořené a hluboké změny bez možnosti deep, když inicializujete datovou proměnnou jako reaktivní objekt:
<script setup>
import { ref, watch } from 'vue';const data = reactive({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Data changed"`);
}
);// This will trigger the watcher because it changes a reactive object
data.length = 43;
</script>
Funkce sledování ve výše uvedeném úryvku zaznamená do konzole, že se data změnila, protože datová proměnná je reaktivní objekt.
Vytvářejte lepší aplikace s Vue Watchers
Pozorovatelé Vue vám mohou pomoci dosáhnout jemnozrnné reaktivity ve vašich aplikacích. Řídí, jak můžete pozorovat změny ve vlastnostech dat a v reakci na to spouštět vlastní logiku.
Porozumění tomu, kdy používat pozorovatele, jejich rozdílům od vypočtených vlastností a možnostem, jako je okamžité a hluboké, může výrazně zlepšit vaši schopnost vytvářet velmi citlivé aplikace Vue.