Naudokite stebėtojus, kad stebėtumėte pokyčius ir intuityviai įgyvendintumėte elgesį.
Key Takeaways
- „JavaScript“ sistemos, tokios kaip „Vue“, siūlo tokias funkcijas kaip komponentų architektūra, būsenos valdymas ir maršruto parinkimas, kad supaprastintų žiniatinklio programų kūrimą.
- „Vue“ stebėjimo priemonės yra funkcijos, kurios stebi reaktyviųjų savybių pokyčius ir leidžia reaguoti į įvykius ir duomenų modifikavimą.
- Lyginant stebėtojus su apskaičiuotomis savybėmis, apskaičiuotos savybės yra glaustesnės ir lengviau skaitomos, todėl našumas ir derinimas yra geresnis.
„JavaScript“ sistemos tapo svarbia žiniatinklio kūrimo dalimi. Taip yra dėl lengvai pasiekiamų funkcijų, įskaitant komponentų architektūrą, būsenos valdymą ir maršruto parinkimą. Tai padeda sumažinti įtampą, pastangas ir laiką, reikalingą norint sukurti žiniatinklio programą nuo nulio.
„Vue“, viena iš šių sistemų, siūlo daug funkcijų, kurios pagreitina kūrimą. Stebėjimo funkcija leidžia stebėti kintamųjų ir išraiškų reikšmes programos vykdymo metu.
Kas yra stebėtojai Vue?
Vue stebėjimo priemonės yra funkcijos, kurios stebi reaktyviosios savybės pokyčius ir atitinkamai reaguoja. Stebėtojai leidžia reaguoti į įvykius ir duomenų pakeitimus.
Norėdami naudoti stebėjimo priemonę, importuokite žiūrėti funkcija iš vue paketas jūsų scenarijuje:
<scriptsetup>
import { watch } from 'vue';
script>
Dabar galite naudoti laikrodžio funkciją, kad įdiegtumėte stebėtoją savo „Vue“ komponente. Štai paprastas pavyzdys:
<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 paprastas komponentas naudoja laikrodžio funkciją, kad galėtų stebėti vartotojo vardo pasikeitimą. Fragmento šablono sekcija apibrėžia komponento HTML struktūrą, kuri apima a p žyma, kuri rodo vartotojo reaktyvaus kintamojo reikšmę.
Šablone taip pat yra mygtuko elementas su a pakeisti vardą funkcija pridedamas prie paspaudimo įvykių klausytojo. Pasikeitus vartotojo kintamajam, Vue suaktyvina atgalinio skambinimo funkciją. Atgalinio skambinimo funkcija rodo įspėjimą: „Vartotojo vardas pakeistas iš „Chinedu“ į „Victor“.
Stebėtojų palyginimas su skaičiuojamomis savybėmis
Svarbu suprasti skirtumą tarp stebėtojų ir apskaičiuotų savybių. Nors jie abu naudojami kaip reaktyvumo įrankiai Vue, turėtumėte juos naudoti įvairiems tikslams.
Pavyzdžiui, su stebėtojais galite apskaičiuoti tėvo ir sūnaus amžiaus sumą, kaip nurodyta:
<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“ komponentas naudoja stebėtojus, kad gautų tėvo ir sūnaus amžių sumą. Norėdami tai padaryti, jis sukuria naują reaktyvųjį kintamąjį, viso. Galite sukurti a reaktyvusis kintamasis, kai naudojate „Vue“ kompozicijos API.
Tada fragmente naudojami du žiūrėti funkcijos stebėti sūnaus ir tėvo amžių. Kiekvieno amžiaus, tiek tėvo, tiek sūnaus, fragmentas apibendrina naują vertę su kito amžiumi. Tada jis išsaugo rezultatą viso reaktyvusis kintamasis.
Apsvarstykite tą patį scenarijų anksčiau pateiktame fragmente su tuo, kuris naudoja apskaičiuotas ypatybes:
<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 fragmentas, palyginti su pirmuoju, yra glaustesnis ir lengviau skaitomas. Fragmentas gauna tėvo ir sūnaus amžiaus sumą ir išsaugo ją apskaičiuotoje nuorodoje (kintamajame), viso. Tada šablono skiltyje rodomas bendras kintamasis naudojant interpoliacija, duomenų susiejimo technika Vue.
Net jei su stebėtojais galite gauti dviejų amžių sumą, geriau tai padaryti su apskaičiuotomis savybėmis. Naudojant stebėjimo priemones šioje situacijoje gali sulėtėti įkėlimo laikas ir sunkesnis derinimas, nes tai apima daugiau kodo.
Nenaudokite stebėjimo priemonių kaip apskaičiuotų savybių pakaitalo. Naudokite stebėtojus, kad stebėtumėte ir reaguotumėte į duomenų pokyčius ir apskaičiuotas ypatybes, kai norite gauti naujų duomenų iš esamų reaktyvių duomenų.
The nedelsiant parinktis yra konfigūracija, kurią galite naudoti kurdami stebėtoją. Ši parinktis nustato, ar stebėtojas turėtų suaktyvinti atgalinį skambutį iškart po to, kai Vue sumontuos komponentą.
Štai komponento, naudojančio stebėtoją su tiesiogine parinktimi, pavyzdys:
<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>
Aukščiau pateiktame fragmente stebėtojas atliks atgalinį skambutį iš karto po komponento inicijavimo ir konsolėje registruos „Skaičius pakeistas iš neapibrėžto į 10“. Tai rodo, kad pradinis kintamasis buvo neapibrėžtas prieš Vue įvedant 10 reikšmę į count ref.
Neatidėliotina parinktis gali būti naudinga tais atvejais, kai norite atlikti pradinį veiksmą arba inicijuoti pagal dabartinę stebimos nuosavybės vertę. Pavyzdžiui, kai jums reikia, kad programa gautų duomenis iš API, kai „Vue“ prijungs komponentą.
„Vue Watchers“ pasiekiamas gilus pasirinkimas
The giliai parinktis, pasiekiama dirbant su stebėtojais „Vue“, leidžia giliai stebėti pokyčius įdėtuose objektuose ar masyvuose. Kai nustatyta į tiesa, stebėtojas gali aptikti įdėtųjų savybių pakeitimus.
Štai „Vue“ komponento su gilia parinktimi pavyzdys:
<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>
Aukščiau pateiktas fragmentas inicijuoja duomenis ref su objektu, kuriame yra a ilgio nuosavybė. Fragmentas nustato giliąją parinktį į tiesa. Tada jis prisijungia prie konsolės, kad duomenys pasikeitė nuo ilgio nuosavybės pasikeitimo į 43.
Nenustačius gilios parinkties tiesine, laikrodžio funkcija nepastebės jokių objekto pakeitimų. Tačiau „Vue“ stebi visus įdėtus ir gilius pakeitimus be gilios parinkties, kai inicijuojate duomenų kintamąjį kaip reaktyvų 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>
Aukščiau pateiktame fragmente esanti stebėjimo funkcija prisijungs prie konsolės, kad duomenys pasikeitė, nes duomenų kintamasis yra reaktyvus objektas.
Kurkite geresnes programas naudodami „Vue Watchers“.
„Vue“ stebėtojai gali padėti pasiekti smulkiagrūdį reaktyvumą jūsų programose. Jie valdo, kaip galite stebėti duomenų ypatybių pokyčius ir paleisti tinkintą logiką.
Suprasdami, kada naudoti stebėjimo priemones, jų skirtumus nuo apskaičiuotų savybių ir tokias parinktis kaip tiesioginis ir gilus, galite žymiai pagerinti jūsų galimybes kurti labai reaguojančias „Vue“ programas.
