Viktiga punkter
- JavaScript-ramverk som Vue förenklar webbutveckling genom att tillhandahålla komponentarkitektur, tillståndshantering och routing.
- Vue-watchers är funktioner som observerar förändringar i reaktiva egenskaper och möjliggör reaktion på händelser och datamodifikationer.
- I jämförelse med beräknade egenskaper, är beräknade egenskaper mer koncisa och läsvänliga, vilket leder till bättre prestanda och enklare felsökning.
JavaScript-ramverk har blivit centrala inom webbutveckling. Deras popularitet beror på de smidiga funktionerna de erbjuder, såsom komponentbaserad arkitektur, hantering av applikationstillstånd och routing. Dessa verktyg bidrar till att minska den ansträngning, tid och komplexitet som krävs för att bygga en webbapplikation från grunden.
Vue, ett framstående ramverk, levererar en mängd funktioner som påskyndar utvecklingsprocessen. En av dessa är möjligheten att övervaka värden på variabler och uttryck under applikationens körning med hjälp av så kallade watchers.
Vad är Watchers i Vue?
I Vue fungerar watchers som lyssnare, de övervakar ändringar i en reaktiv variabel och reagerar automatiskt på dem. Med watchers kan man hantera specifika händelser och datamodifikationer som sker i applikationen.
För att använda en watcher, börja med att importera `watch`-funktionen från Vue-paketet:
<script setup>
import { watch } from 'vue';
</script>
Nu kan du använda `watch`-funktionen för att implementera en övervakare i din Vue-komponent. Här är ett grundläggande exempel:
<template>
<div>
<p>{{ user }}</p>
<button @click="changeName">Ändra namn</button>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
const user = ref('Chinedu');
const changeName = () => {
user.value="Victor"; // Ändra användarens namn
};
watch(user, (newUser, oldUser) => {
alert(`Användarnamnet ändrades från "${oldUser}" till "${newUser}"`);
});
</script>
Den här komponenten använder `watch` för att observera ändringar i en användares namn. I mallavsnittet finns en paragraf som visar värdet på den reaktiva variabeln `user`. Det finns också en knapp som vid klick utlöser funktionen `changeName`. När `user`-variabeln uppdateras aktiveras en callback-funktion som visar ett meddelande om namnbytet.
Jämförelse mellan Watchers och Beräknade Egenskaper
Det är viktigt att förstå skillnaden mellan watchers och beräknade egenskaper. Båda används för att hantera reaktivitet i Vue, men de är avsedda för olika användningsfall.
Till exempel kan vi använda watchers för att beräkna summan av en fars och sons åldrar:
<template>
<input type="text" placeholder="Fars ålder" v-model="father">
<input type="text" placeholder="Sons ålder" v-model="son">
<p>Total ålder: {{ 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>
Denna komponent använder watchers för att beräkna den totala åldern. En ny reaktiv variabel, `total`, skapas för detta ändamål. Två `watch`-funktioner används för att observera `son`s respektive `father`s åldrar. Varje gång en av åldrarna ändras, summeras det nya värdet med den andra åldern, och resultatet lagras i `total`.
Samma scenario, men implementerat med beräknade egenskaper, ser ut så här:
<template>
<input type="text" placeholder="Fars ålder" v-model="father">
<input type="text" placeholder="Sons ålder" v-model="son">
<p>Total ålder: {{ 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>
Detta alternativ är mer koncist och lättare att förstå. Här beräknas den totala åldern och lagras i en beräknad referens (`ref`), `total`. Mallen visar sedan `total`-variabeln via interpolation.
Även om watchers kan användas för att beräkna summan av två åldrar, är beräknade egenskaper att föredra i detta fall. Att använda watchers i denna situation kan leda till långsammare laddningstider och svårare felsökning, eftersom det resulterar i mer kod.
Använd inte watchers som en ersättning för beräknade egenskaper. Watchers är bäst för att observera och reagera på dataändringar. Använd beräknade egenskaper när du vill härleda ny data från befintlig reaktiv data.
Det finns också ett `immediate`-alternativ som du kan använda när du skapar en watcher. Detta alternativ avgör om callback-funktionen ska köras direkt efter att komponenten har monterats.
Här är ett exempel på en komponent som använder en watcher med `immediate`-alternativet:
<script setup>
import { ref, watch } from 'vue';
const count = ref(10);
watch(
count,
(newCount, oldCount) => {
console.log(`Antalet ändrades från ${oldCount} till ${newCount}`);
},
{ immediate: true }
);
</script>
I detta exempel körs callback-funktionen direkt efter komponentinitiering och loggar ”Antalet ändrades från odefinierat till 10” i konsolen. Detta indikerar att den initiala variabeln var odefinierad innan Vue injicerade värdet 10 till `count`.
Det `immediate`-alternativet kan vara användbart i situationer där du vill utföra en initial åtgärd eller initialisering baserat på den bevakade egenskapens initiala värde, som till exempel när du behöver hämta data från ett API när komponenten har monterats.
`deep`-alternativet i Vue Watchers
Med `deep`-alternativet kan du observera förändringar i kapslade objekt eller arrayer. När `deep` är satt till `true` kan watchern upptäcka ändringar inuti kapslade egenskaper.
Här är ett exempel på en Vue-komponent med `deep`-alternativet:
<script setup>
import { ref, watch } from 'vue';
const data = ref({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Data ändrades`);
},
{ deep: true }
);
// Detta kommer att trigga watchern eftersom det är en djup ändring
data.value.length = 43;
</script>
I exemplet ovan initieras `data` som en `ref` som innehåller ett objekt med egenskapen `length`. `deep`-alternativet sätts till `true`. Därefter loggar komponenten till konsolen att data har ändrats, efter att `length`-egenskapen ändrats till 43.
Utan `deep`-alternativet satt till `true` skulle watchern inte uppmärksamma förändringar i objektet. Vue spårar dock automatiskt alla kapslade och djupa ändringar utan `deep`-alternativet när du initialiserar datavariabeln som ett reaktivt objekt:
<script setup>
import { reactive, watch } from 'vue';
const data = reactive({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Data ändrades`);
}
);
// Detta kommer att trigga watchern eftersom det ändrar ett reaktivt objekt
data.length = 43;
</script>
I det här exemplet kommer watchern att logga att data har ändrats eftersom datavariabeln är ett reaktivt objekt.
Bygg bättre applikationer med Vue Watchers
Vue’s watchers är ett kraftfullt verktyg för att uppnå finkornig reaktivitet i dina applikationer. De ger kontroll över hur du observerar ändringar i data och utför anpassad logik som respons.
Att förstå när man ska använda watchers, deras skillnader från beräknade egenskaper och alternativ som `immediate` och `deep` kan avsevärt förbättra din förmåga att skapa responsiva och effektiva Vue-applikationer.