Kasutage jälgijaid muutuste jälgimiseks ja käitumise intuitiivsemaks rakendamiseks.
Võtmed kaasavõtmiseks
- JavaScripti raamistikud, nagu Vue, pakuvad veebirakenduste arendamise lihtsustamiseks funktsioone, nagu komponentide arhitektuur, olekuhaldus ja marsruutimine.
- Vue jälgijad on funktsioonid, mis jälgivad reaktiivsete omaduste muutusi ja võimaldavad reageerida sündmustele ja andmete muutmisele.
- Võrreldes jälgijaid arvutatud omadustega, on arvutatud omadused kokkuvõtlikumad ja hõlpsamini loetavad, mille tulemuseks on parem jõudlus ja silumine.
JavaScripti raamistikud on muutunud veebiarenduse oluliseks osaks. Selle põhjuseks on nende hõlpsasti juurdepääsetavad funktsioonid, sealhulgas komponentide arhitektuur, olekuhaldus ja marsruutimine. Need aitavad vähendada veebirakenduse nullist loomiseks kuluvat stressi, pingutust ja aega.
Vue, üks neist raamistikest, pakub arengu kiirendamiseks palju funktsioone. Jälgimisfunktsioon võimaldab teil programmi täitmise ajal jälgida muutujate ja avaldiste väärtusi.
Mis on Vue jälgijad?
Vue jälgijad on funktsioonid, mis jälgivad reaktiivse omaduse muutusi ja reageerivad sellele vastavalt. Vaatlejad võimaldavad teil sündmustele ja andmete muutmisele reageerida.
Vaatleja kasutamiseks importige vaata funktsioonist vue pakett oma skriptis:
<scriptsetup>
import { watch } from 'vue';
script>
Nüüd saate kasutada kellafunktsiooni, et lisada oma Vue komponenti jälgija. Siin on lihtne näide:
<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>
See lihtne komponent kasutab kasutajanime muutumise jälgimiseks kellafunktsiooni. Lõigu malli jaotis määratleb komponendi HTML-i struktuuri, mis sisaldab a lk silt, mis kuvab kasutaja reaktiivse muutuja väärtuse.
Mall sisaldab ka nupuelementi, millel on a muuda nime funktsiooni lisatud klikisündmuste kuulajale. Kui kasutaja muutuja muutub, käivitab Vue tagasihelistamise funktsiooni. Tagasihelistamise funktsioon kuvab hoiatuse: "Kasutajanimi "Chinedu" muudeti nimeks "Victor".
Vaatlejate võrdlemine arvutatud omadustega
Oluline on mõista erinevust jälgijate ja arvutatud omaduste vahel. Kuigi neid mõlemaid kasutatakse Vue reaktiivsustööriistadena, peaksite neid kasutama erinevatel eesmärkidel.
Näiteks saate vaatajatega arvutada isa ja poja vanuse summa järgmiselt:
<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>
See Vue komponent kasutab isa ja poja vanuse summa saamiseks jälgijaid. Selleks loob see uue reaktiivse muutuja, kokku. Saate luua a reaktiivne muutuja, kui kasutate Vue kompositsiooni API-d.
Seejärel kasutab katkend kahte vaata funktsioonid poja ja isa vanuse jälgimiseks. Iga vanuse, isa või poja kohta, võtab jupp uue väärtuse kokku teise vanusega. Seejärel salvestab see tulemuse kokku reaktiivne muutuja.
Mõelge ülaltoodud koodilõigu samale stsenaariumile, mis kasutab arvutatud atribuute:
<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>
See jupp on eelmisega võrreldes ülevaatlikum ja hõlpsamini loetav. Lõik saab isa ja poja vanuse summa ning salvestab selle arvutatud ref (muutuja) kokku. Malli jaotises kuvatakse seejärel kogu muutuja kasutades interpolatsioon, Vue andmete sidumise tehnika.
Isegi kui saate vaatlejatega kahe vanuse kokku saada, on parem seda teha arvutatud omadustega. Sellises olukorras jälgijate kasutamine võib põhjustada aeglasema laadimisaja ja raskema silumise, kuna see hõlmab rohkem koodi.
Ärge kasutage jälgijaid arvutatud omaduste asendajana. Kasutage jälgijaid andmete muutuste jälgimiseks ja neile reageerimiseks ning arvutatud atribuute, kui soovite olemasolevatest reaktiivsetest andmetest uusi andmeid tuletada.
The kohene valik on konfiguratsioon, mida saate kasutada jälgija loomisel. See valik määrab, kas jälgija peaks käivitama tagasihelistamise kohe pärast seda, kui Vue on komponendi ühendanud.
Siin on näide komponendist, mis kasutab kohese valikuga jälgijat:
<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>
Ülaltoodud lõigul käivitab jälgija kohe pärast komponendi initsialiseerimist tagasihelistamise ja logib konsooli sisse loendi „Arv muudeti määramata väärtuseks 10”. See näitab, et esialgne muutuja oli määratlemata, enne kui Vue sisestas loenduri viitenumbri väärtuse 10.
Vahetu valik võib olla mugav stsenaariumide puhul, kus soovite teostada esialgse toimingu või lähtestamist jälgitava atribuudi praeguse väärtuse alusel. Näiteks kui teil on vaja rakendust API-st andmete toomiseks, kui Vue komponendi ühendab.
Vue Watchersis saadaval olev sügav valik
The sügav suvand, mis on saadaval Vue jälgijatega töötamisel, võimaldab sügavalt jälgida pesastatud objektide või massiivide muutusi. Kui see on määratud tõsi, saab jälgija tuvastada pesastatud atribuutide muudatusi.
Siin on näide sügava valikuga Vue komponendist:
<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>
Ülaltoodud koodilõik initsialiseerib andmeid ref objektiga, mis sisaldab a pikkus vara. Lõik määrab sügava valiku väärtuseks tõsi. Seejärel logib see konsooli, et andmed on muutunud pärast seda, kui atribuudi pikkus on muutunud 43.
Kui sügava suvandi väärtuseks pole määratud Tõene, ei märka kellafunktsioon objektil mingeid muutusi. Vue jälgib aga kõiki pesastatud ja sügavaid muudatusi ilma sügava suvandita, kui lähtestate andmemuutuja reaktiivse objektina:
<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>
Ülaltoodud koodilõigu jälgimisfunktsioon logib konsooli, et andmed on muutunud, kuna andmemuutuja on reaktiivne objekt.
Looge Vue Watchersiga paremaid rakendusi
Vue jälgijad aitavad teil rakendustes peeneteralist reaktsioonivõimet saavutada. Need juhivad seda, kuidas saate jälgida andmete atribuutide muutusi ja käivitada vastuseks kohandatud loogika.
Arusaamine, millal kasutada jälgijaid, nende erinevusi arvutatud omadustest ja valikutest, nagu vahetu ja sügav, võib oluliselt suurendada teie võimet luua väga tundlike Vue rakendusi.
