Pomocí pozorovatelů můžete sledovat změny a intuitivněji implementovat chování.

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.

instagram viewer

Chcete-li použít hlídač, importujte soubor hodinky funkce z vue balíček ve vašem skriptu:

<scriptsetup>
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 Namebutton>
div>
template>
<scriptsetup>
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. Část šablony úryvku definuje strukturu HTML komponenty, která zahrnuje a p tag, který zobrazuje hodnotu uživatelské reaktivní proměnné.

Šablona také obsahuje prvek tlačítka s a změnit jméno funkce připojený 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>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
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, celkový. Můžete vytvořit a reaktivní proměnná, když používáte Vue's Composition API.

Fragment pak využívá dva hodinky funkce pro 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>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
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. Fragment získá součet věku otce a syna a uloží jej do vypočítaného ref (proměnné), celkový. Sekce šablony pak zobrazuje celkovou proměnnou pomocí interpolace, technika vázání 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.

The bezprostřední volba 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í:

<scriptsetup>
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

The hluboký možnost dostupná při práci s pozorovateli ve Vue umožňuje hluboké pozorování změn v rámci vnořených objektů nebo polí. Při nastavení na skutečnýmůže pozorovatel detekovat změny v rámci vnořených vlastností.

Zde je příklad komponenty Vue s možností deep:

<scriptsetup>
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>

Výše uvedený fragment inicializuje soubor data ref s objektem obsahujícím a délka vlastnictví. Fragment nastaví možnost deep na skutečný. Poté zaznamená do konzoly, že se data změnila od doby, kdy se změnila vlastnost length 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:

<scriptsetup>
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 jemné 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.