Lär dig mer om Vue.js Watchers för att förbättra din utveckling av webbappar

Viktiga lärdomar

Vue är ett populärt JavaScript-ramverk som ger utvecklare flera viktiga fördelar när de bygger webbapplikationer. Bland dessa finns stöd för komponentbaserad arkitektur, som möjliggör modulär och återanvändbar kod, ett robust state management-system, som hjälper till att upprätthålla konsekvens mellan olika delar av en applikation, och inbyggda routingfunktioner, som möjliggör sömlös navigering mellan olika sidor eller vyer inom samma webbplats. Genom att utnyttja dessa funktioner kan utvecklare effektivisera sina arbetsflöden och skapa mer effektiva och skalbara webbappar med Vue.

Vue watchers fungerar som observatörer av reaktiva egenskaper, vilket gör det möjligt att upptäcka ändringar och underlätta svar på inträffade händelser eller ändringar av data.

Att använda beräknade egenskaper är ett mer kortfattat och lättläst alternativ jämfört med att använda watchers för att uppnå liknande funktionalitet, vilket i slutändan leder till förbättrad exekveringshastighet och strömlinjeformade felsökningsprocesser.

JavaScript-ramverk har utvecklats till ett oumbärligt element inom webbutveckling, tack vare deras användarvänliga attribut som modulär design, tillståndsbevarande och navigeringshantering. Följaktligen bidrar dessa integrerade komponenter avsevärt till att minska bördan, utgifterna och varaktigheten som krävs för att konstruera en webbapplikation de novo.

Vue har en rad funktioner som underlättar snabb utveckling av applikationer. En sådan funktion är Watch-funktionen, som gör det möjligt för utvecklare att spåra förändringar i variabel- och uttrycksvärden under runtime-operationer.

Vad är Watchers i Vue?

Vue Watchers är funktioner som observerar ändringar i en reaktiv egenskap och därefter ger ett lämpligt svar i enlighet med sådana ändringar. Dessa watchers gör det möjligt för användare att reagera på händelser och justeringar av data, vilket ger en möjlighet till uppmärksam övervakning inom applikationen.

För att kunna använda en Watcher i ditt Vue-projekt måste du först importera funktionen “watch” från Vue-paketet och införliva den i ditt skript.

 <script setup>
import { watch } from 'vue';
</script>

Med hjälp av den medföljande watch -funktionen kan man effektivt införliva en “watcher” i sin Vue-komponent. En rudimentär illustration är följande:

 <template>
  <div>
    <p>{{ user }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

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

Detta specifika element använder Watcher-funktionen för att hålla reda på förändringar i en användares identitet. Kodblockets markeringsområde fastställer komponentens HTML-ramverk, som består av ett styckeelement som visar värdet av reaktanten med namnet “user”.

Mallen innehåller en knappkomponent som är associerad med en klickhändelse-lyssnare och en changeName funktion. När användarens inmatning ändras anropar Vue den angivna callback-funktionen som därefter presenterar ett popup-meddelande som anger att “användarnamnet har uppdaterats från ‘Chinedu’ till ‘Victor’.

Jämförelse mellan Watchers och Computed Properties

Det är viktigt att förstå skillnaderna mellan Watchers och Computed Properties när man använder dem som reaktiva mekanismer i Vue-ramverket. Även om båda har liknande funktioner när det gäller att uppdatera databindningar baserat på ändringar, är det viktigt att använda var och en för sitt specifika avsedda syfte.

En illustration av detta koncept finns i beräkningen av den kombinerade åldern för en far och son med hjälp av ett solur, enligt följande:

 <template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template>

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

Den aktuella Vue-komponenten använder watchers för att få fram den sammanlagda åldern för fadern och sonen genom att skapa en ny reaktiv variabel som kallas “total”. Denna process utförs med hjälp av Composition API som tillhandahålls av Vue.

Koden använder två watch-funktioner för att övervaka åldern på både fadern och sonen. Genom att beräkna summan av dessa åldrar och uppdatera värdet för den ena personens ålder med den andra personens ålder, erhålls en slutsumma för de kombinerade åldrarna. Detta resultat lagras sedan i

På liknande sätt kan vi undersöka ett exempel som involverar beräknade egenskaper:javascriptconst person = {firstName: ‘John’,lastName: ‘Doe’,fullName() {return this.firstName \+ ’ ’ \+ this.lastName;}};console.log(person.fullName); // Utdata: John Doe

 <template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template>

<script setup>
import { ref , computed } from 'vue';

const father = ref();
const son = ref();

const total = computed(() => {
  return Number(father.value) \\+ Number(son.value);
});

</script>

Den reviderade koden presenterar en mer kortfattad och strömlinjeformad metod för att läsa åldern på både fadern och sonen, samtidigt som den utnyttjar en beräknad egenskap för att lagra deras kombinerade antal. Genom att använda Vues kraftfulla funktioner för databindning genom interpolationer i mallsektionen kan informationen visas på ett smidigt sätt för användaren.

Att använda beräknade egenskaper ger ett mer effektivt sätt att bestämma summan av två åldersvärden jämfört med att förlita sig på watchers. Implementeringen av watchers i detta sammanhang kan leda till ökade laddningstider och komplicera felsökningsprocessen på grund av en mer komplex kodbas.

Det är tillrådligt att använda watchers uteslutande för att observera och svara på ändringar i data snarare än att använda dem som ett alternativ till beräknade egenskaper, som är utformade speciellt för att härleda ytterligare information från aktuella reaktiva data.

Det omedelbara alternativet för watchers i Vue

Alternativet “omedelbar”, som fungerar som ett alternativ under processen för att skapa en watcher, anger om watcherns callback-funktion ska utföras omedelbart när den associerade Vue-komponenten har monterats.

Här är en illustration av en komponent som använder en watcher-funktion med attributet “immediate”:

 <script setup>
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är den ovan nämnda komponentens livscykel inleds ska observatören omedelbart utföra sin medföljande funktion och registrera “Count changed from an indeterminate state to ten” i systemloggen. En sådan åtgärd indikerar att den preliminära enheten inte hade tilldelats något värde innan Vue hade tillhandahållit ett värde på tio till räknarreferensen.

I vissa situationer kan det vara fördelaktigt att använda alternativet “omedelbart” för att utföra en inledande åtgärd eller initiering som är beroende av det aktuella tillståndet för ett övervakat attribut. Om din applikation till exempel behöver hämta data från ett API så snart det monterar en specifik komponent.

Det djupa alternativet i Vue Watchers

Vue Watcher-funktionen erbjuder en djupgående observationsnivå för ändringar inom slutna objekt eller matriser, vilket gör det möjligt att upptäcka ändringar som sker inom djupt inbäddade egenskaper. Denna funktion aktiveras genom att ställa in motsvarande parameter till dess bekräftande motsvarighet.

Här är en illustration av en Vue.js-komponent som använder alternativet “deep”, vilket gör att kapslade objekt kan visas och redigeras i en trädliknande struktur i inmatningsfältet:

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

Det angivna kodsegmentet initierar referensen data med ett objekt som har ett “length”-attribut. Därefter aktiverar det alternativet “deep” och verifierar i konsolen att data har uppdaterats eftersom värdet för egenskapen “length” har ändrats från sitt ursprungliga tillstånd till trettiotre (33).

När du initierar en datavariabel i Vue som ett reaktivt objekt kan den spåra ändringar i djupt kapslade objekt utan att använda alternativet “deep”. Om alternativet “deep” inte är aktiverat kommer watch-funktionen däremot inte att upptäcka ändringar som gjorts i sådana objekt.

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

Den medföljande koden innehåller en watch-funktion som, när den upptäcker ändringar i det reaktiva objekt som kallas “data”, loggar ett meddelande till konsolen som anger att dessa ändringar har inträffat.

Bygg bättre appar med Vue Watchers

Vue Watchers möjliggör en hög grad av reaktivt beteende i en applikation genom att möjliggöra observation av ändringar av specifika dataattribut och utlösa förutbestämda operationer i samband med sådana ändringar.

Att få en god förståelse för lämpliga omständigheter för att använda watchers, urskilja deras olikheter med beräknade egenskaper och bekanta sig med val som omedelbar och djup kan avsevärt öka ens kapacitet att konstruera mycket reaktiva Vue-applikationer.