Prečítajte si o Vue.js Watchers na zlepšenie vývoja vašej webovej aplikácie

Kľúčové informácie

• Rámce JavaScriptu, ako je Vue, ponúkajú funkcie, ako je architektúra komponentov, správa stavu a smerovanie na zjednodušenie vývoja webových aplikácií.
• Vue watchers sú funkcie, ktoré sledujú zmeny reaktívnych vlastností a umožňujú reagovať na udalosti a modifikáciu údajov.
• Pri porovnaní pozorovateľov s vypočítanými vlastnosťami sú vypočítané vlastnosti stručnejšie a ľahšie čitateľné, čo vedie k lepšiemu výkonu a ladeniu.

JavaScriptové rámce sa stali dôležitou súčasťou vývoja webu. Je to spôsobené ich ľahko dostupnými funkciami vrátane architektúry komponentov, správy stavu a smerovania. Pomáhajú znižovať stres, námahu a čas potrebný na vytvorenie webovej aplikácie od začiatku.

Vue, jeden z týchto rámcov, ponúka mnoho funkcií na urýchlenie vývoja. Funkcia sledovania vám umožňuje sledovať hodnoty premenných a výrazov počas vykonávania programu.

Čo sú to pozorovatelia vo Vue?

Vue watchers sú funkcie, ktoré monitorujú zmeny v reaktívnej vlastnosti a podľa toho reagujú. Strážcovia vám umožňujú reagovať na udalosti a úpravy údajov.

Ak chcete použiť sledovač, importujte súbor sledovať funkcia z vue balík vo vašom skripte:

<scriptsetup>
import { watch } from 'vue';
script>

Teraz môžete použiť funkciu sledovania na implementáciu strážcu vo vašom komponente Vue. Tu je jednoduchý prí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>

Tento jednoduchý komponent využíva funkciu hodiniek na sledovanie zmeny používateľského mena. Časť šablóny úryvku definuje štruktúru HTML komponentu, ktorá zahŕňa a p tag, ktorý zobrazuje hodnotu užívateľsky reaktívnej premennej.

Šablóna obsahuje aj prvok tlačidla s a zmeniť meno funkciu pripojený k prijímaču udalosti kliknutia. Keď sa užívateľská premenná zmení, Vue spustí funkciu spätného volania. Funkcia spätného volania zobrazí upozornenie: „Meno používateľa sa zmenilo z „Chinedu“ na „Victor“.

Porovnanie Watchers s vypočítanými vlastnosťami

Je dôležité pochopiť rozdiel medzi pozorovateľmi a vypočítanými vlastnosťami. Hoci sa oba používajú ako nástroje reaktivity vo Vue, mali by ste ich používať na rôzne účely.

Môžete napríklad vypočítať súčet veku otca a syna s pozorovateľmi 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>

Tento komponent Vue používa pozorovateľov na získanie súčtu veku otca a syna. Na tento účel vytvorí novú reaktívnu premennú, Celkom. Môžete vytvoriť a reaktívna premenná, keď používate Vue's Composition API.

Úryvok potom využíva dvoch sledovať funkcie na sledovanie veku syna a otca. Pre každý vek, či už otca alebo syna, úryvok zhŕňa novú hodnotu s vekom druhého. Potom uloží výsledok do Celkom reaktívna premenná.

Zvážte rovnaký scenár vo vyššie uvedenom úryvku ako ten, ktorý používa 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 úryvok je oproti predchádzajúcemu stručnejší a ľahšie čitateľný. Úryvok získa súčet veku otca a syna a uloží ho do vypočítaného ref (premennej), Celkom. V časti šablóny sa potom zobrazí celková premenná pomocou interpolácia, technika viazania údajov vo Vue.

Aj keď môžete získať súčet dvoch vekov pomocou pozorovateľov, je lepšie to urobiť s vypočítanými vlastnosťami. Používanie sledovačov v tejto situácii môže viesť k pomalšiemu času načítania a ťažšiemu ladeniu jednoducho preto, že zahŕňa viac kódu.

Nepoužívajte hodinky ako náhradu za vypočítané vlastnosti. Ak chcete z existujúcich reaktívnych údajov odvodiť nové údaje, použite sledovače na monitorovanie a reakciu na zmeny údajov a vypočítané vlastnosti.

The okamžitá voľba je konfigurácia, ktorú môžete použiť pri vytváraní pozorovateľa. Táto možnosť určuje, či má divák spustiť spätné volanie ihneď po tom, ako Vue namontuje komponent.

Tu je príklad komponentu, ktorý používa watcher s okamžitou možnosťou:

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

Vo vyššie uvedenom úryvku používateľ vykoná spätné volanie ihneď po inicializácii komponentu a do konzoly zaznamená „Počet sa zmenil z nedefinovaného na 10“. To ukazuje, že počiatočná premenná bola nedefinovaná predtým, ako Vue vložila hodnotu 10 do ref.

Okamžitá možnosť môže byť užitočná v scenároch, kde chcete vykonať počiatočnú akciu alebo inicializáciu na základe aktuálnej hodnoty sledovanej vlastnosti. Napríklad, keď potrebujete, aby vaša aplikácia načítala údaje z API, keď Vue pripojí komponent.

Hlboká možnosť dostupná vo Vue Watchers

The hlboký možnosť dostupná pri práci s pozorovateľmi vo Vue umožňuje hlboké pozorovanie zmien v rámci vnorených objektov alebo polí. Pri nastavení na pravda, môže pozorovateľ zistiť zmeny v rámci vnorených vlastností.

Tu je príklad komponentu Vue s možnosťou 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>

Útržok uvedený vyššie inicializuje súbor údajov ref s objektom obsahujúcim a dĺžka nehnuteľnosť. Útržok nastaví možnosť deep na pravda. Potom sa prihlási do konzoly, že údaje sa zmenili od zmeny vlastnosti dĺžky 43.

Bez možnosti deep nastavenej na hodnotu true funkcia sledovania nezaznamená žiadne zmeny objektu. Vue však sleduje všetky vnorené a hlboké zmeny bez možnosti deep, keď inicializujete dátovú premennú ako reaktívny 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>

Funkcia sledovania vo vyššie uvedenom úryvku zaznamená do konzoly, že údaje sa zmenili, pretože dátová premenná je reaktívny objekt.

Vytvárajte lepšie aplikácie s Vue Watcher

Pozorovatelia Vue vám môžu pomôcť dosiahnuť jemnozrnnú reaktivitu vo vašich aplikáciách. Ovládajú, ako môžete sledovať zmeny vo vlastnostiach údajov a ako odpoveď spustiť vlastnú logiku.

Pochopenie, kedy použiť sledovače, ich rozdiely od vypočítaných vlastností a možnosti ako okamžité a hlboké, môžu výrazne zlepšiť vašu schopnosť vytvárať veľmi citlivé aplikácie Vue.