Koristite promatrače za praćenje promjena i intuitivniju implementaciju ponašanja.
Ključni zahvati
- JavaScript okviri kao što je Vue nude značajke kao što su arhitektura komponenti, upravljanje stanjem i usmjeravanje za pojednostavljenje razvoja web aplikacija.
- Vue promatrači su funkcije koje prate promjene u reaktivnim svojstvima i omogućuju vam da reagirate na događaje i izmjene podataka.
- Uspoređujući promatrače s izračunatim svojstvima, izračunata svojstva su sažetija i lakša za čitanje, što rezultira boljom izvedbom i otklanjanjem pogrešaka.
JavaScript okviri postali su vitalni dio web razvoja. To je zbog njihovih lako dostupnih značajki, uključujući arhitekturu komponenti, upravljanje stanjem i usmjeravanje. Oni pomažu u smanjenju stresa, truda i vremena potrebnog za izradu web-aplikacije od nule.
Vue, jedan od tih okvira, nudi mnoge značajke za ubrzavanje razvoja. Značajka promatranja omogućuje praćenje vrijednosti varijabli i izraza tijekom izvođenja programa.
Što su promatrači u Vueu?
Vue promatrači su funkcije koje prate promjene u reaktivnom svojstvu i odgovaraju u skladu s tim. Promatrači vam omogućuju da reagirate na događaje i izmjene podataka.
Da biste koristili promatrač, uvezite Gledati funkcija iz vue paket u vašoj skripti:
<scriptsetup>
import { watch } from 'vue';
script>
Sada možete koristiti funkciju promatranja za implementaciju promatrača u svoju Vue komponentu. Evo jednostavnog primjera:
<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>
Ova jednostavna komponenta koristi funkciju promatranja za praćenje promjene korisničkog imena. Odjeljak predloška isječka definira HTML strukturu komponente, koja uključuje a str oznaku koja prikazuje vrijednost korisničke reaktivne varijable.
Predložak također sadrži element gumba s a promijeniIme funkcija pripojen slušatelju događaja klika. Kada se korisnička varijabla promijeni, Vue pokreće funkciju povratnog poziva. Funkcija povratnog poziva prikazuje upozorenje: "Korisničko ime promijenjeno iz "Chinedu" u "Victor"."
Usporedba promatrača s izračunatim svojstvima
Važno je razumjeti razliku između promatrača i izračunatih svojstava. Iako se oba koriste kao alati za reaktivnost u Vueu, trebali biste ih koristiti u različite svrhe.
Na primjer, možete izračunati zbroj godina oca i sina s promatračima, ovako:
<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>
Ova Vue komponenta koristi promatrače kako bi dobila zbroj godina oca i sina. Da bi to učinio, stvara novu reaktivnu varijablu, ukupno. Možete stvoriti a reaktivnu varijablu kada koristite Vue's Composition API.
Isječak zatim zapošljava dva Gledati funkcije za praćenje starosti sina i oca. Za svaku dob, bilo oca ili sina, isječak sažima novu vrijednost s dobi drugog. Zatim sprema rezultat u ukupno reaktivna varijabla.
Razmotrite isti scenarij u gornjem isječku za onaj koji koristi izračunata svojstva:
<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>
Ovaj je isječak, u usporedbi s prethodnim, sažetiji i lakši za čitanje. Isječak dobiva zbroj godina oca i sina i sprema ga u izračunatu ref (varijablu), ukupno. Odjeljak predloška zatim prikazuje ukupnu varijablu pomoću interpolacija, tehnika povezivanja podataka u Vueu.
Čak i ako možete dobiti ukupno dva doba s promatračima, bolje je to učiniti s izračunatim svojstvima. Korištenje promatrača u ovoj situaciji može dovesti do sporijeg vremena učitavanja i težeg otklanjanja pogrešaka jednostavno zato što uključuje više koda.
Nemojte koristiti promatrače kao zamjenu za izračunata svojstva. Koristite promatrače za praćenje i reagiranje na promjene podataka i izračunata svojstva kada želite izvesti nove podatke iz postojećih reaktivnih podataka.
The neposredna opcija je konfiguracija koju možete koristiti prilikom stvaranja promatrača. Ova opcija određuje treba li promatrač pokrenuti povratni poziv odmah nakon što Vue montira komponentu.
Evo primjera komponente koja koristi promatrač s trenutnom opcijom:
<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>
U gornjem isječku, promatrač će izvršiti povratni poziv odmah nakon inicijalizacije komponente i zabilježiti "Broj promijenjen s nedefiniranog na 10" na konzoli. Ovo pokazuje da je početna varijabla bila nedefinirana prije nego što je Vue ubacio vrijednost 10 u ref.
Trenutačna opcija može biti korisna u scenarijima u kojima želite izvršiti početnu radnju ili inicijalizaciju na temelju trenutne vrijednosti promatranog svojstva. Na primjer, kada trebate da vaša aplikacija dohvati podatke iz API-ja nakon što Vue montira komponentu.
Opcija Deep dostupna u Vue Watchersima
The duboko opcija dostupna pri radu s promatračima u Vueu omogućuje duboko promatranje promjena unutar ugniježđenih objekata ili nizova. Kada je postavljeno na pravi, promatrač može otkriti promjene unutar ugniježđenih svojstava.
Evo primjera Vue komponente s opcijom 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>
Gornji isječak inicijalizira podaci ref s objektom koji sadrži a duljina vlasništvo. Isječak postavlja duboku opciju na pravi. Zatim se prijavljuje na konzolu da su se podaci promijenili otkad je svojstvo duljine promijenjeno u 43.
Bez duboke opcije postavljene na true, funkcija promatranja neće primijetiti nikakve promjene na objektu. Međutim, Vue prati sve ugniježđene i duboke promjene bez duboke opcije kada inicijalizirate podatkovnu varijablu kao reaktivni 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>
Funkcija promatranja u gornjem isječku prijavit će na konzolu da su se podaci promijenili jer je varijabla podataka reaktivni objekt.
Izradite bolje aplikacije uz Vue Watchers
Vueovi promatrači mogu vam pomoći u postizanju precizne reaktivnosti u vašim aplikacijama. Oni kontroliraju kako možete promatrati promjene u svojstvima podataka i pokrenuti prilagođenu logiku kao odgovor.
Razumijevanje kada koristiti promatrače, njihove razlike u odnosu na izračunata svojstva i opcije poput neposrednog i dubokog može značajno poboljšati vašu sposobnost izrade vrlo responzivnih Vue aplikacija.
