Opi Vue.js Watchers -sovelluksesta parantamaan verkkosovellustesi kehitystä

Avaimet takeawayt

• JavaScript-kehykset, kuten Vue, tarjoavat ominaisuuksia, kuten komponenttiarkkitehtuuria, tilanhallintaa ja reititystä verkkosovellusten kehittämisen yksinkertaistamiseksi.
• Vue-seuraajat ovat toimintoja, jotka valvovat reaktiivisten ominaisuuksien muutoksia ja mahdollistavat reagoinnin tapahtumiin ja tietojen muutoksiin.
• Kun katsojia verrataan laskettuihin ominaisuuksiin, lasketut ominaisuudet ovat tiiviimpiä ja helpompia lukea, mikä parantaa suorituskykyä ja virheenkorjausta.

JavaScript-kehyksistä on tullut tärkeä osa verkkokehitystä. Tämä johtuu niiden helposti saatavilla olevista ominaisuuksista, mukaan lukien komponenttiarkkitehtuuri, tilanhallinta ja reititys. Nämä auttavat vähentämään stressiä, vaivaa ja aikaa, jotka tarvitaan verkkosovelluksen luomiseen tyhjästä.

Vue, yksi näistä kehyksistä, tarjoaa monia ominaisuuksia, jotka nopeuttavat kehitystä. Watch-ominaisuuden avulla voit seurata muuttujien ja lausekkeiden arvoja ohjelman suorittamisen aikana.

Mitä tarkkailijat ovat Vuessa?

Vue-seuraajat ovat toimintoja, jotka tarkkailevat muutoksia reaktiivisessa ominaisuudessa ja reagoivat vastaavasti. Watchersin avulla voit reagoida tapahtumiin ja tietojen muutoksiin.

Jos haluat käyttää tarkkailijaa, tuo katsella toiminto alkaen vue paketti käsikirjoituksessasi:

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

Voit nyt käyttää kellotoimintoa toteuttamaan Vue-komponenttiisi tarkkailijan. Tässä on yksinkertainen esimerkki:

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

Tämä yksinkertainen komponentti käyttää kellotoimintoa käyttäjän nimen muutoksen seuraamiseen. Katkelman malliosio määrittää komponentin HTML-rakenteen, joka sisältää a s tag, joka näyttää käyttäjän reaktiivisen muuttujan arvon.

Malli sisältää myös painikeelementin, jossa on a vaihtaa nimeä toiminto liitetty napsautustapahtuman kuuntelijaan. Kun käyttäjämuuttuja muuttuu, Vue laukaisee takaisinsoittotoiminnon. Takaisinsoittotoiminto näyttää hälytyksen: "Käyttäjänimi muutettu "Chinedu":sta "Victoriksi"."

Katsojien vertaaminen laskettuihin ominaisuuksiin

On tärkeää ymmärtää ero katsojien ja laskettujen ominaisuuksien välillä. Vaikka niitä molempia käytetään reaktiivisuustyökaluina Vuessa, sinun tulee käyttää niitä eri tarkoituksiin.

Voit esimerkiksi laskea isän ja pojan iän summan katsojien kanssa seuraavasti:

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

Tämä Vue-komponentti käyttää tarkkailijoita saadakseen isän ja pojan iän summan. Tätä varten se luo uuden reaktiivisen muuttujan, kaikki yhteensä. Voit luoda a reaktiivinen muuttuja, kun käytät Vuen koostumuksen sovellusliittymää.

Katkelma käyttää sitten kahta katsella Toimii pojan ja isän iän katsomiseen. Kunkin iän, joko isän tai pojan, katkelma summaa uuden arvon toisen iän kanssa. Sitten se tallentaa tuloksen kaikki yhteensä reaktiivinen muuttuja.

Harkitse samaa skenaariota yllä olevassa katkelmassa kuin skenaariota, joka käyttää laskettuja ominaisuuksia:

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

Tämä katkelma on edelliseen verrattuna tiiviimpi ja helpompi lukea. Katkelma saa isän ja pojan iän summan ja tallentaa sen laskettuun viitearvoon (muuttuja), kaikki yhteensä. Malliosiossa näkyy sitten kokonaismuuttuja käyttämällä interpolointi, tietojen sidontatekniikka Vuessa.

Vaikka saisitkin kahden iän yhteismäärän tarkkailijoilla, on parempi tehdä se laskennallisilla ominaisuuksilla. Watchersin käyttäminen tässä tilanteessa voi johtaa hitaampiin latausaikoihin ja vaikeampaan virheenkorjaukseen yksinkertaisesti siksi, että se sisältää enemmän koodia.

Älä käytä tarkkailijoita laskettujen ominaisuuksien korvikkeena. Käytä tarkkailijoita tietojen muutosten seurantaan ja niihin reagoimiseen sekä laskettuja ominaisuuksia, kun haluat johtaa uutta dataa olemassa olevista reaktiivisista tiedoista.

The välittömästi vaihtoehto on kokoonpano, jota voit käyttää tarkkailijaa luotaessa. Tämä vaihtoehto määrittää, käynnistääkö tarkkailijan takaisinkutsun välittömästi sen jälkeen, kun Vue on asentanut komponentin.

Tässä on esimerkki komponentista, joka käyttää tarkkailijaa välittömällä valinnalla:

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

Yllä olevassa katkelmassa tarkkailija suorittaa takaisinkutsun välittömästi komponentin alustuksen jälkeen ja kirjaa konsoliin "Laskuri muutettu määrittämättömästä arvoon 10". Tämä osoittaa, että alkumuuttuja oli määrittelemätön ennen kuin Vue injektoi arvon 10 count ref.

Välitön vaihtoehto voi olla kätevä skenaarioissa, joissa haluat suorittaa alustavan toiminnon tai alustuksen seurattavan ominaisuuden nykyisen arvon perusteella. Esimerkiksi kun tarvitset sovelluksesi hakemaan tietoja API: sta, kun Vue on asentanut komponentin.

Syvä vaihtoehto saatavilla Vue Watchersissa

The syvä vaihtoehto, joka on käytettävissä työskennellessäsi tarkkailijoiden kanssa Vuessa, mahdollistaa sisäkkäisten objektien tai taulukoiden muutosten syvällisen havainnoinnin. Kun asetettu totta, tarkkailija voi havaita muutokset sisäkkäisissä ominaisuuksissa.

Tässä on esimerkki Vue-komponentista, jossa on syvä vaihtoehto:

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

Yllä oleva katkelma alustaa tiedot ref objektilla, joka sisältää a pituus omaisuutta. Katkelma asettaa syvävaihtoehdon arvoon totta. Sitten se kirjaa konsoliin, että tiedot ovat muuttuneet sen jälkeen, kun pituus-ominaisuus on muuttunut 43.

Ilman syväasetusta tosi, kellotoiminto ei huomaa muutoksia objektiin. Vue kuitenkin seuraa kaikkia sisäkkäisiä ja syvällisiä muutoksia ilman syvää vaihtoehtoa, kun alustat datamuuttujan reaktiiviseksi objektiksi:

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

Yllä olevan katkelman tarkkailutoiminto kirjaa konsoliin, että tiedot muuttuivat, koska datamuuttuja on reaktiivinen objekti.

Rakenna parempia sovelluksia Vue Watchersin avulla

Vuen tarkkailijat voivat auttaa sinua saavuttamaan hienojakoisen reaktiivisuuden sovelluksissasi. Ne ohjaavat, kuinka voit tarkkailla muutoksia tietojen ominaisuuksissa ja suorittaa mukautettua logiikkaa vastauksena.

Kun ymmärrät tarkkailijoiden käytön, niiden erot lasketuista ominaisuuksista ja vaihtoehdoista, kuten välittömästä ja syvästä, voit merkittävästi parantaa kykyäsi rakentaa erittäin reagoivia Vue-sovelluksia.