Spoznajte opazovalce Vue.js za izboljšanje razvoja vaše spletne aplikacije

Ključni zaključki

• Ogrodja JavaScript, kot je Vue, ponujajo funkcije, kot so arhitektura komponent, upravljanje stanja in usmerjanje za poenostavitev razvoja spletnih aplikacij.
• Opazovalci Vue so funkcije, ki spremljajo spremembe reaktivnih lastnosti in vam omogočajo, da se odzovete na dogodke in spreminjanje podatkov.
• Če primerjamo opazovalce z izračunanimi lastnostmi, so izračunane lastnosti bolj jedrnate in lažje berljive, kar ima za posledico boljšo zmogljivost in odpravljanje napak.

Ogrodja JavaScript so postala pomemben del spletnega razvoja. To je posledica njihovih lahko dostopnih funkcij, vključno z arhitekturo komponent, upravljanjem stanja in usmerjanjem. Ti pomagajo zmanjšati stres, trud in čas, potreben za izdelavo spletne aplikacije iz nič.

Vue, eno od teh ogrodij, ponuja številne funkcije za pospešitev razvoja. Funkcija opazovanja vam omogoča spremljanje vrednosti spremenljivk in izrazov med izvajanjem programa.

Kaj so opazovalci v Vue?

Opazovalci Vue so funkcije, ki spremljajo spremembe v reaktivni lastnosti in se ustrezno odzovejo. Opazovalci vam omogočajo, da se odzovete na dogodke in spreminjanje podatkov.

Če želite uporabiti opazovalca, uvozite gledati funkcijo od vue paket v vašem skriptu:

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

Zdaj lahko uporabite funkcijo watch za implementacijo opazovalca v komponento Vue. Tukaj je preprost primer:

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

Ta preprosta komponenta uporablja funkcijo opazovanja za spremljanje spremembe uporabniškega imena. Razdelek s predlogo izrezka definira strukturo HTML komponente, ki vključuje a str oznaka, ki prikazuje vrednost odzivne spremenljivke uporabnika.

Predloga vsebuje tudi element gumba z a spremeniIme funkcijo priložen poslušalcu dogodka klika. Ko se uporabniška spremenljivka spremeni, Vue sproži funkcijo povratnega klica. Funkcija povratnega klica prikaže opozorilo: »Uporabniško ime spremenjeno iz »Chinedu« v »Victor«.«

Primerjava opazovalcev z izračunanimi lastnostmi

Pomembno je razumeti razliko med opazovalci in računalniškimi lastnostmi. Čeprav se oba uporabljata kot orodji za reaktivnost v Vue, ju morate uporabljati za različne namene.

Na primer, lahko izračunate vsoto starosti očeta in sina z opazovalci, takole:

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

Ta komponenta Vue uporablja opazovalce, da dobi vsoto starosti očeta in sina. Da bi to naredil, ustvari novo reaktivno spremenljivko, skupaj. Ustvarite lahko a reaktivno spremenljivko, ko uporabljate API za sestavo Vue.

Delček nato zaposluje dva gledati funkcije za spremljanje starosti sina in očeta. Za vsako starost, očeta ali sina, izrezek sešteje novo vrednost s starostjo drugega. Rezultat nato shrani v skupaj reaktivna spremenljivka.

Razmislite o istem scenariju v zgornjem delčku kode, ki uporablja izračunane lastnosti:

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

Ta delček je v primerjavi s prejšnjim bolj jedrnat in lažje berljiv. Delček dobi vsoto starosti očeta in sina in jo shrani v izračunani ref (spremenljivka), skupaj. V razdelku predloge je nato prikazana skupna spremenljivka z uporabo interpolacija, tehnika vezave podatkov v Vue.

Tudi če lahko z opazovalci dobite skupno vrednost obeh starosti, je bolje, da to storite z izračunanimi lastnostmi. Uporaba nadzornikov v tej situaciji lahko privede do počasnejših časov nalaganja in težjega odpravljanja napak preprosto zato, ker vključuje več kode.

Opazovalcev ne uporabljajte kot nadomestilo za izračunane lastnosti. Uporabite opazovalce za spremljanje in odzivanje na spremembe podatkov ter izračunane lastnosti, ko želite pridobiti nove podatke iz obstoječih reaktivnih podatkov.

The takojšnje možnost je konfiguracija, ki jo lahko uporabite pri ustvarjanju opazovalca. Ta možnost določa, ali naj opazovalec sproži povratni klic takoj, ko Vue namesti komponento.

Tukaj je primer komponente, ki uporablja opazovalca s takojšnjo možnostjo:

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

V zgornjem izrezku bo opazovalec izvedel povratni klic takoj po inicializaciji komponente in v konzolo zabeležil »Število spremenjeno z nedefiniranega na 10«. To kaže, da je bila začetna spremenljivka nedefinirana, preden je Vue vnesel vrednost 10 v ref.

Takojšnja možnost je lahko priročna v scenarijih, kjer želite izvesti začetno dejanje ali inicializacijo na podlagi trenutne vrednosti opazovane lastnosti. Na primer, ko potrebujete, da vaša aplikacija pridobi podatke iz API-ja, ko Vue namesti komponento.

Možnost Deep je na voljo v Vue Watchers

The globoko možnost, ki je na voljo pri delu z opazovalci v Vue, omogoča globoko opazovanje sprememb znotraj ugnezdenih predmetov ali nizov. Ko je nastavljeno na prav, lahko opazovalec zazna spremembe znotraj ugnezdenih lastnosti.

Tukaj je primer komponente Vue z možnostjo 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>

Zgornji delček inicializira podatke ref z objektom, ki vsebuje a dolžina premoženje. Delček nastavi globoko možnost na prav. Nato se v konzolo prijavi, da so se podatki spremenili, odkar se je spremenila lastnost dolžine 43.

Brez globoke možnosti, nastavljene na true, funkcija ure ne bo opazila nobenih sprememb na predmetu. Vendar Vue sledi vsem ugnezdenim in globokim spremembam brez globoke možnosti, ko inicializirate podatkovno spremenljivko kot 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 opazovanja v zgornjem izrezku bo v konzolo zabeležila, da so se podatki spremenili, ker je podatkovna spremenljivka reaktiven objekt.

Ustvarite boljše aplikacije z Vue Watchers

Opazovalci Vue vam lahko pomagajo doseči natančno reaktivnost v vaših aplikacijah. Nadzorujejo, kako lahko opazujete spremembe v lastnostih podatkov in v odgovor izvajate logiko po meri.

Razumevanje, kdaj uporabiti opazovalce, njihove razlike od računalniških lastnosti in možnosti, kot sta takojšnja in globoka, lahko bistveno izboljša vašo sposobnost izdelave zelo odzivnih aplikacij Vue.