Puncte cheie de reținut
- Framework-urile JavaScript, precum Vue, oferă funcționalități ca arhitectura bazată pe componente, managementul stării și rutarea, simplificând dezvoltarea aplicațiilor web.
- Observatorii (watchers) din Vue sunt funcții care monitorizează schimbările proprietăților reactive și permit reacția la modificări și evenimente.
- Comparativ cu proprietățile calculate, observatorii sunt mai verborosi, în timp ce proprietățile calculate oferă un cod mai lizibil, optimizând performanța și depanarea.
Framework-urile JavaScript au devenit esențiale în dezvoltarea web modernă. Popularitatea lor se datorează facilităților oferite, cum ar fi arhitectura componentelor, gestiunea stării și rutarea. Acestea reduc complexitatea și timpul necesar pentru construirea unei aplicații web de la zero.
Vue, ca unul dintre aceste framework-uri, oferă o mulțime de funcționalități care accelerează procesul de dezvoltare. Funcția de „watch” permite monitorizarea valorilor variabilelor și expresiilor în timp real, în timpul rulării programului.
Ce sunt Watchers în Vue?
Observatorii (watchers) Vue sunt funcții care urmăresc modificările unei proprietăți reactive și reacționează în consecință. Aceștia permit gestionarea evenimentelor și a modificărilor de date într-un mod eficient.
Pentru a folosi un watcher, importați funcția „watch” din pachetul Vue în scriptul dumneavoastră:
<script setup>
import { watch } from 'vue';
</script>
Acum, puteți utiliza funcția de observare pentru a implementa un watcher în componenta Vue. Iată un exemplu simplu:
<template>
<div>
<p>{{ user }}</p>
<button @click="changeName">Schimbă Numele</button>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
const user = ref('Chinedu');
const changeName = () => {
user.value="Victor"; // Modifică numele utilizatorului
};
watch(user, (newUser, oldUser) => {
alert(`Numele utilizatorului a fost schimbat din "${oldUser}" în "${newUser}"`);
});
</script>
Această componentă simplă folosește funcția de observare pentru a monitoriza schimbarea numelui unui utilizator. Secțiunea „template” a codului definește structura HTML a componentei, incluzând un element paragraf care afișează valoarea variabilei reactive „user”.
Șablonul include, de asemenea, un buton cu o funcție „changeName” asociată unui eveniment de clic. Când variabila „user” se modifică, Vue declanșează funcția de „callback”. Aceasta afișează o alertă care indică schimbarea numelui utilizatorului.
Compararea Observatorilor cu Proprietățile Calculate
Este important să înțelegeți diferența dintre observatori și proprietățile calculate. Deși ambele sunt instrumente de reactivitate în Vue, utilizările lor sunt diferite.
De exemplu, putem calcula suma vârstei unui tată și a fiului cu ajutorul observatorilor:
<template>
<input type="text" placeholder="Vârsta Tatălui" v-model="father">
<input type="text" placeholder="Vârsta Fiului" v-model="son">
<p>Vârsta Totală: {{ 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>
Această componentă Vue folosește observatori pentru a calcula suma vârstelor tatălui și fiului, creând o nouă variabilă reactivă numită „total”. Aceasta este metoda de creare a variabilelor reactive folosind API-ul Composition din Vue.
Codul folosește două funcții de observare pentru a urmări modificările vârstelor fiului și a tatălui. Pentru fiecare dintre ele, suma dintre noua valoare și vârsta celuilalt este calculată și stocată în variabila reactivă „total”.
Acum, vom analiza același scenariu folosind proprietăți calculate:
<template>
<input type="text" placeholder="Vârsta Tatălui" v-model="father">
<input type="text" placeholder="Vârsta Fiului" v-model="son">
<p>Vârsta Totală: {{ 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>
Acest cod este mai concis și mai ușor de citit. El calculează suma vârstelor tatălui și fiului și o stochează într-o proprietate calculată numită „total”. Secțiunea „template” afișează apoi valoarea variabilei „total” folosind interpolarea, o tehnică de legare a datelor în Vue.
Deși putem obține suma celor două vârste folosind observatori, este preferabil să folosim proprietăți calculate. Folosirea observatorilor în această situație poate încetini încărcarea și complica depanarea, deoarece necesită mai mult cod.
Nu utilizați observatorii ca înlocuitori pentru proprietățile calculate. Observatorii sunt destinați monitorizării și reacției la modificări de date, în timp ce proprietățile calculate sunt folosite pentru a obține date noi din datele reactive existente.
Opțiunea „immediate” este o configurație care poate fi utilizată la crearea unui observator. Aceasta specifică dacă funcția „callback” a observatorului trebuie să fie executată imediat după montarea componentei.
Iată un exemplu de componentă care utilizează un observator cu opțiunea „immediate”:
<script setup>
import { ref, watch } from 'vue';
const count = ref(10);
watch(
count,
(newCount, oldCount) => {
console.log(`Numărul a fost schimbat de la ${oldCount} la ${newCount}`);
},
{ immediate: true }
);
</script>
În codul de mai sus, observatorul va executa funcția „callback” imediat după inițializarea componentei și va afișa „Numărul a fost schimbat de la undefined la 10” în consolă. Acest lucru demonstrează că variabila inițială a fost „undefined” înainte ca Vue să injecteze valoarea 10 în referința „count”.
Opțiunea „immediate” poate fi utilă în situații în care doriți să executați o acțiune inițială sau o inițializare bazată pe valoarea curentă a proprietății urmărite. De exemplu, când o aplicație trebuie să preia date dintr-un API imediat după montarea unei componente.
Opțiunea „Deep” disponibilă în Watchers Vue
Opțiunea „deep”, disponibilă atunci când lucrați cu observatori în Vue, permite monitorizarea profundă a modificărilor obiectelor sau matricelor imbricate. Când este setată la „true”, observatorul detectează modificări în proprietățile imbricate.
Iată un exemplu de componentă Vue care utilizează opțiunea „deep”:
<script setup>
import { ref, watch } from 'vue';
const data = ref({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Datele au fost modificate`);
},
{ deep: true }
);
// Aceasta va declanșa observatorul, deoarece este o modificare profundă
data.value.length = 43;
</script>
Codul de mai sus inițializează referința „data” cu un obiect care conține o proprietate „length”. Opțiunea „deep” este setată la „true”. Apoi, se afișează în consolă că datele s-au schimbat, deoarece proprietatea „length” a fost modificată la 43.
Fără opțiunea „deep” setată la „true”, funcția de observare nu ar sesiza nicio modificare a obiectului. Cu toate acestea, Vue monitorizează modificările imbricate și profunde fără opțiunea „deep” atunci când variabila „data” este inițializată ca un obiect reactiv:
<script setup>
import { ref, watch } from 'vue';
const data = reactive({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Datele au fost modificate`);
}
);
// Aceasta va declanșa observatorul, deoarece modifică un obiect reactiv
data.length = 43;
</script>
Funcția de observare din codul de mai sus va afișa în consolă mesajul că datele au fost modificate, deoarece variabila „data” este un obiect reactiv.
Construiește Aplicații Mai Bune cu Watchers Vue
Observatorii Vue vă ajută să obțineți o reactivitate precisă în aplicațiile dumneavoastră. Ei controlează modul în care observați modificările în proprietățile datelor și cum rulați logica personalizată ca răspuns la acestea.
Înțelegerea momentului potrivit pentru a folosi observatorii, a diferențelor lor față de proprietățile calculate și a opțiunilor precum „immediate” și „deep” poate îmbunătăți semnificativ capacitatea dumneavoastră de a crea aplicații Vue foarte receptive.