Aflați despre Vue.js Watchers pentru a vă îmbunătăți dezvoltarea aplicației web

Recomandări cheie

• Cadrele JavaScript precum Vue oferă caracteristici precum arhitectura componentelor, managementul stării și rutarea pentru a simplifica dezvoltarea aplicațiilor web.
• Observatorii Vue sunt funcții care monitorizează modificările proprietăților reactive și vă permit să reacționați la evenimente și modificarea datelor.
• Comparând observatorii cu proprietățile calculate, proprietățile calculate sunt mai concise și mai ușor de citit, rezultând performanțe și depanare mai bune.

Cadrele JavaScript au devenit o parte vitală a dezvoltării web. Acest lucru se datorează caracteristicilor lor ușor accesibile, inclusiv arhitectura componentelor, managementul stării și rutarea. Acestea ajută la reducerea stresului, efortului și timpului necesar pentru a construi o aplicație web de la zero.

Vue, unul dintre aceste cadre, oferă multe caracteristici pentru a accelera dezvoltarea. Caracteristica ceas vă permite să monitorizați valorile variabilelor și expresiilor în timpul execuției programului.

Ce sunt Watchers în Vue?

Observatorii Vue sunt funcții care monitorizează modificările unei proprietăți reactive și răspund în consecință. Observatorii vă permit să reacționați la evenimente și la modificarea datelor.

Pentru a utiliza un watcher, importați ceas funcția de la vue pachet în scriptul dvs.:

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

Acum puteți utiliza funcția de urmărire pentru a implementa un observator în componenta Vue. Iată un exemplu simplu:

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

Această componentă simplă folosește funcția de ceas pentru a monitoriza schimbarea numelui unui utilizator. Secțiunea șablon a fragmentului definește structura HTML a componentei, care include a p etichetă care afișează valoarea variabilei reactive de utilizator.

Șablonul conține și un element buton, cu a schimba numele funcţie atașat unui ascultător de evenimente clic. Când variabila utilizator se modifică, Vue declanșează funcția de apel invers. Funcția de apel invers afișează o alertă: „Numele utilizatorului a fost schimbat din „Chinedu” în „Victor”.”

Compararea observatorilor cu proprietățile calculate

Este important să înțelegeți diferența dintre observatori și proprietățile calculate. Deși ambele sunt folosite ca instrumente de reactivitate în Vue, ar trebui să le utilizați în scopuri diferite.

De exemplu, puteți calcula suma vârstei unui tată și a fiului cu observatori, astfel:

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

Această componentă Vue folosește observatori pentru a obține suma vârstelor tatălui și fiului. Pentru a face acest lucru, creează o nouă variabilă reactivă, total. Puteți crea un variabilă reactivă atunci când utilizați API-ul Composition Vue.

Fragmentul folosește apoi două ceas funcții pentru a urmări vârsta fiului și a tatălui. Pentru fiecare vârstă, fie tată, fie fiu, fragmentul însumează noua valoare cu vârsta celuilalt. Apoi salvează rezultatul în total variabilă reactivă.

Luați în considerare același scenariu din fragmentul de mai sus pentru unul care utilizează proprietăți calculate:

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

Acest fragment, în comparație cu primul, este mai concis și mai ușor de citit. Fragmentul primește suma vârstei tatălui și fiului și o salvează într-o referință calculată (variabilă), total. Secțiunea șablon afișează apoi variabila totală folosind interpolare, o tehnică de legare a datelor în Vue.

Chiar dacă puteți obține totalul celor două vârste cu observatori, este mai bine să faceți acest lucru cu proprietăți calculate. Utilizarea observatorilor în această situație poate duce la timpi de încărcare mai lenți și la o depanare mai dificilă, pur și simplu pentru că implică mai mult cod.

Nu utilizați observatori ca înlocuitori pentru proprietățile calculate. Folosiți observatori pentru a monitoriza și a reacționa la modificările datelor și pentru a calcula proprietăți atunci când doriți să obțineți date noi din datele reactive existente.

The imediat opțiunea este o configurație pe care o puteți utiliza atunci când creați un monitor. Această opțiune determină dacă observatorul ar trebui să declanșeze apelul înapoi imediat după ce Vue a montat componenta.

Iată un exemplu de componentă care utilizează un observator cu opțiunea imediată:

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

În fragmentul de mai sus, observatorul își va executa apelul imediat după inițializarea componentei și va înregistra „Numărul schimbat de la nedefinit la 10” pe consolă. Acest lucru arată că variabila inițială a fost nedefinită înainte ca Vue să injecteze valoarea 10 în referința de numărare.

Opțiunea imediată poate fi utilă în scenariile în care doriți să efectuați o acțiune inițială sau o inițializare pe baza valorii curente a proprietății urmărite. De exemplu, atunci când aveți nevoie ca aplicația dvs. să preia date dintr-un API odată ce Vue montează o componentă.

Opțiunea Deep disponibilă în Vue Watchers

The adânc opțiunea disponibilă atunci când lucrați cu observatori în Vue permite observarea profundă a modificărilor din obiectele sau matricele imbricate. Când este setat la Adevărat, observatorul poate detecta modificări în cadrul proprietăților imbricate.

Iată un exemplu de componentă Vue cu opțiunea 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>

Fragmentul de mai sus inițializează date ref cu un obiect care conține a lungime proprietate. Fragmentul setează opțiunea profundă la Adevărat. Apoi conectează în consolă că datele s-au schimbat de când proprietatea lungime a fost schimbată în 43.

Fără opțiunea deep setată la adevărat, funcția de ceas nu va observa nicio modificare a obiectului. Cu toate acestea, Vue urmărește toate modificările imbricate și profunde fără opțiunea deep atunci când inițializați variabila de date ca obiect reactiv:

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

Funcția de urmărire din fragmentul de mai sus se va conecta la consola pe care datele s-au schimbat deoarece variabila de date este un obiect reactiv.

Creați aplicații mai bune cu Vue Watchers

Observatorii Vue vă pot ajuta să obțineți o reactivitate fină în aplicațiile dvs. Ei controlează modul în care puteți observa modificările în proprietățile datelor și rulați logica personalizată ca răspuns.

Înțelegerea când să folosiți observatorii, diferențele lor față de proprietățile calculate și opțiunile precum imediate și profunde vă pot îmbunătăți semnificativ capacitatea de a crea aplicații Vue foarte receptive.