Izmantojiet vērotājus, lai pārraudzītu izmaiņas un intuitīvāk īstenotu uzvedību.
Key Takeaways
- Tādi JavaScript ietvari kā Vue piedāvā tādas funkcijas kā komponentu arhitektūra, stāvokļa pārvaldība un maršrutēšana, lai vienkāršotu tīmekļa lietotņu izstrādi.
- Vue vērotāji ir funkcijas, kas uzrauga reaktīvo īpašību izmaiņas un ļauj reaģēt uz notikumiem un datu izmaiņām.
- Salīdzinot vērotājus ar aprēķinātajiem rekvizītiem, aprēķinātie rekvizīti ir kodolīgāki un vieglāk lasāmi, kā rezultātā tiek nodrošināta labāka veiktspēja un atkļūdošana.
JavaScript ietvari ir kļuvuši par būtisku tīmekļa izstrādes sastāvdaļu. Tas ir saistīts ar to viegli pieejamajiem līdzekļiem, tostarp komponentu arhitektūru, stāvokļa pārvaldību un maršrutēšanu. Tie palīdz samazināt stresu, pūles un laiku, kas nepieciešams, lai izveidotu tīmekļa lietotni no nulles.
Vue, viens no šiem ietvariem, piedāvā daudzas funkcijas, lai paātrinātu attīstību. Skatīšanās funkcija ļauj pārraudzīt mainīgo un izteiksmju vērtības programmas izpildes laikā.
Kas ir Vue vērotāji?
Vue vērotāji ir funkcijas, kas pārrauga izmaiņas reaktīvā īpašībā un attiecīgi reaģē. Vērotāji ļauj reaģēt uz notikumiem un datu izmaiņām.
Lai izmantotu novērotāju, importējiet skatīties funkcija no vue pakotne jūsu skriptā:
<scriptsetup>
import { watch } from 'vue';
script>
Tagad varat izmantot pulksteņa funkciju, lai savā Vue komponentā ieviestu novērotāju. Šeit ir vienkāršs piemērs:
<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>
Šis vienkāršais komponents izmanto pulksteņa funkciju, lai uzraudzītu lietotāja vārda izmaiņas. Fragmenta veidnes sadaļa nosaka komponenta HTML struktūru, kas ietver a lpp tags, kas parāda lietotāja reaktīvā mainīgā vērtību.
Veidnē ir arī pogas elements ar a mainītVārdu funkciju pievienots klikšķu notikumu uztvērējam. Kad mainās lietotāja mainīgais, Vue aktivizē atzvanīšanas funkciju. Atzvanīšanas funkcija parāda brīdinājumu: "Lietotājvārds mainīts no "Chinedu" uz "Victor"."
Vērotāju salīdzināšana ar aprēķinātajām īpašībām
Ir svarīgi saprast atšķirību starp vērotājiem un aprēķinātajām īpašībām. Lai gan tie abi tiek izmantoti kā reaktivitātes rīki Vue, tie jāizmanto dažādiem mērķiem.
Piemēram, jūs varat aprēķināt tēva un dēla vecuma summu ar novērotājiem, piemēram:
<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>
Šis Vue komponents izmanto vērotājus, lai iegūtu tēva un dēla vecuma summu. Lai to izdarītu, tas izveido jaunu reaktīvo mainīgo, Kopā. Jūs varat izveidot a reaktīvais mainīgais, kad izmantojat Vue kompozīcijas API.
Pēc tam fragmentā tiek izmantoti divi skatīties funkcijas, lai noskatītos dēla un tēva vecumu. Katram vecumam — gan tēvam, gan dēlam — jaunā vērtība tiek summēta ar otra vecuma vecumu. Pēc tam tas saglabā rezultātu Kopā reaktīvs mainīgais.
Apsveriet to pašu scenāriju iepriekš minētajā fragmentā ar tādu, kurā tiek izmantoti aprēķinātie rekvizīti:
<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>
Šis fragments, salīdzinot ar iepriekšējo, ir kodolīgāks un vieglāk lasāms. Fragments iegūst tēva un dēla vecuma summu un saglabā to aprēķinātā ref (mainīgā), Kopā. Sadaļā Veidne tiek parādīts kopējais mainīgais, izmantojot interpolācija, datu saistīšanas tehnika Vue.
Pat ja jūs varat iegūt abu vecumu kopējo summu, izmantojot vērotājus, labāk to darīt, izmantojot aprēķinātās īpašības. Vērotāju izmantošana šādā situācijā var izraisīt lēnāku ielādes laiku un grūtāku atkļūdošanu, jo tas ietver vairāk koda.
Neizmantojiet vērotājus kā aprēķināto īpašību aizstājēju. Izmantojiet vērotājus, lai uzraudzītu datu izmaiņas un reaģētu uz tām, un aprēķinātos rekvizītus, ja vēlaties iegūt jaunus datus no esošajiem reaktīvajiem datiem.
The nekavējoties opcija ir konfigurācija, ko varat izmantot, veidojot vērotāju. Šī opcija nosaka, vai novērotājam ir jāaktivizē atzvanīšana tūlīt pēc tam, kad Vue ir pievienojis komponentu.
Šeit ir piemērs komponentam, kurā tiek izmantots vērotājs ar tūlītēju opciju:
<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>
Iepriekš minētajā fragmentā novērotājs veiks atzvanīšanu tūlīt pēc komponenta inicializācijas un konsolē reģistrēs ziņojumu “Skaits mainīts no nenoteikta uz 10”. Tas parāda, ka sākotnējais mainīgais nebija definēts, pirms Vue ievadīja vērtību 10 skaitīšanas ref.
Tūlītējā opcija var būt noderīga gadījumos, kad vēlaties veikt sākotnējo darbību vai inicializāciju, pamatojoties uz skatītā īpašuma pašreizējo vērtību. Piemēram, ja jums ir nepieciešams, lai jūsu lietotne izgūtu datus no API, kad Vue ir pievienojis komponentu.
Padziļinātā iespēja, kas pieejama vietnē Vue Watchers
The dziļi opcija, kas pieejama, strādājot ar Vue novērotājiem, ļauj padziļināti novērot izmaiņas ligzdotajos objektos vai masīvos. Kad iestatīts uz taisnība, novērotājs var noteikt izmaiņas ligzdotajos rekvizītos.
Šeit ir Vue komponenta piemērs ar dziļo opciju:
<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>
Iepriekš minētais fragments inicializē datus ref ar objektu, kas satur a garums īpašums. Fragments iestata dziļo opciju uz taisnība. Pēc tam konsolē tiek reģistrēts, ka dati ir mainījušies kopš garuma rekvizīta maiņas uz 43.
Ja dziļā opcija nav iestatīta uz True, pulksteņa funkcija nepamanīs nekādas izmaiņas objektā. Tomēr Vue izseko visas ligzdotās un dziļās izmaiņas bez dziļās opcijas, kad inicializējat datu mainīgo kā reaktīvu objektu:
<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>
Skatīšanas funkcija iepriekš minētajā fragmentā reģistrēs konsolē, ka dati ir mainījušies, jo datu mainīgais ir reaktīvs objekts.
Izveidojiet labākas lietotnes, izmantojot Vue Watchers
Vue novērotāji var palīdzēt sasniegt smalku reaktivitāti jūsu lietojumprogrammās. Tie kontrolē, kā varat novērot izmaiņas datu rekvizītos un palaist pielāgotu loģiku, reaģējot uz to.
Izpratne par to, kad izmantot vērotājus, to atšķirības no aprēķinātajiem rekvizītiem un tādas iespējas kā tūlītēja un dziļa, var ievērojami uzlabot jūsu spēju izveidot ļoti atsaucīgas Vue lietojumprogrammas.
