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

Nyckel takeaways

  • JavaScript-ramverk som Vue erbjuder funktioner som komponentarkitektur, tillståndshantering och routing för att förenkla webbappsutveckling.
  • Vue watchers är funktioner som övervakar förändringar i reaktiva egenskaper och låter dig reagera på händelser och datamodifieringar.
  • Om man jämför tittare med beräknade egenskaper, är beräknade egenskaper mer kortfattade och lättare att läsa, vilket resulterar i bättre prestanda och felsökning.

JavaScript-ramverk har blivit en viktig del av webbutveckling. Detta beror på deras lättillgängliga funktioner, inklusive komponentarkitektur, tillståndshantering och routing. Dessa hjälper till att minska stressen, ansträngningen och tiden som krävs för att bygga en webbapp från grunden.

Vue, ett av dessa ramverk, erbjuder många funktioner för att påskynda utvecklingen. Bevakningsfunktionen låter dig övervaka värdena för variabler och uttryck under programkörning.

Vad är Watchers i Vue?

Vue watchers är funktioner som övervakar förändringar i en reaktiv egenskap och svarar därefter. Watchers låter dig reagera på händelser och dataändringar.

För att använda en watcher, importera klockfunktionen från vue-paketet i ditt skript:

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

Du kan nu använda klockfunktionen för att implementera en watcher i din Vue-komponent. Här är ett enkelt exempel:

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

Denna enkla komponent använder klockfunktionen för att övervaka förändringen av en användares namn. Snuttets mallsektion definierar komponentens HTML-struktur, som inkluderar ap-tagg som visar värdet på användarens reaktiva variabel.

Mallen innehåller också ett knappelement, med en changeName-funktion kopplad till en klickhändelselyssnare. När användarvariabeln ändras utlöser Vue återuppringningsfunktionen. Återuppringningsfunktionen visar en varning: ”Användarnamn har ändrats från ”Chinedu” till ”Victor”.

Jämför Watchers med beräknade egenskaper

Det är viktigt att förstå skillnaden mellan watchers och beräknade egenskaper. Även om de båda används som reaktivitetsverktyg i Vue, bör du använda dem för olika ändamål.

Till exempel kan du beräkna summan av en far och sons ålder med tittare, så här:

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

Denna Vue-komponent använder watchers för att få summan av faderns och sonens åldrar. För att göra det skapar den en ny reaktiv variabel, total. Du kan skapa en reaktiv variabel när du använder Vues Composition API.

Utdraget använder sedan två klockfunktioner för att se sonens och pappans åldrar. För varje ålder, antingen far eller son, summerar utdraget det nya värdet med den andras ålder. Den sparar sedan resultatet till den totala reaktiva variabeln.

Betrakta samma scenario i ovanstående kodavsnitt som ett som använder beräknade egenskaper:

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

Detta utdrag, jämfört med det förra, är mer kortfattat och lättare att läsa. Snutten får summan av faderns och sonens ålder och sparar den i en beräknad ref (variabel), totalt. Mallsektionen visar sedan den totala variabeln med hjälp av interpolation, en databindningsteknik i Vue.

Även om du kan få summan av de två åldrarna med watchers, är det bättre att göra det med beräknade egenskaper. Att använda watchers i den här situationen kan leda till långsammare laddningstider och svårare felsökning bara för att det involverar mer kod.

Använd inte watchers som ersättning för beräknade egenskaper. Använd bevakare för att övervaka och reagera på dataändringar och beräknade egenskaper när du vill härleda ny data från befintliga reaktiva data.

Det omedelbara alternativet är en konfiguration som du kan använda när du skapar en watcher. Det här alternativet avgör om bevakaren ska utlösa sin återuppringning omedelbart efter att Vue har monterat komponenten.

Här är ett exempel på en komponent som använder en watcher med det omedelbara alternativet:

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

I utdraget ovan kommer bevakaren att utföra sin återuppringning omedelbart efter komponentinitiering och logga ”Antalet ändrat från odefinierat till 10” till konsolen. Detta visar att den initiala variabeln var odefinierad innan Vue injicerade värdet 10 till count ref.

Det omedelbara alternativet kan vara praktiskt i scenarier där du vill utföra en initial åtgärd eller initiering baserat på det aktuella värdet på den bevakade egenskapen. Till exempel när du behöver din app för att hämta data från ett API när Vue har monterat en komponent.

Det djupa alternativet tillgängligt i Vue Watchers

Det djupa alternativet som är tillgängligt när du arbetar med bevakare i Vue möjliggör djup observation av förändringar inom kapslade objekt eller arrayer. När den är inställd på sant kan övervakaren upptäcka ändringar inom kapslade egenskaper.

Här är ett exempel på en Vue-komponent med djupalternativet:

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

Utdraget ovan initierar datareferens med ett objekt som innehåller en length-egenskap. Utdraget ställer in djupalternativet till sant. Den loggar sedan till konsolen att data har ändrats sedan egenskapen length har ändrats till 43.

Utan djupalternativet inställt på sant kommer klockfunktionen inte att märka några förändringar av objektet. Vue spårar dock alla kapslade och djupa ändringar utan djupalternativet när du initierar datavariabeln som ett reaktivt 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>

Bevakningsfunktionen i ovanstående kodavsnitt kommer att logga till konsolen att data har ändrats eftersom datavariabeln är ett reaktivt objekt.

Bygg bättre appar med Vue Watchers

Vues bevakare kan hjälpa dig att uppnå finkornig reaktivitet i dina applikationer. De styr hur du kan observera ändringar i dataegenskaper och köra anpassad logik som svar.

Att förstå när man ska använda watchers, deras skillnader från beräknade egenskaper och alternativ som omedelbar och djup kan avsevärt förbättra din förmåga att bygga mycket lyhörda Vue-applikationer.