Erfahren Sie mehr über Vue.js Watchers zur Verbesserung Ihrer Web-App-Entwicklung

Die zentralen Thesen

• JavaScript-Frameworks wie Vue bieten Funktionen wie Komponentenarchitektur, Statusverwaltung und Routing, um die Entwicklung von Web-Apps zu vereinfachen.
• Vue-Watcher sind Funktionen, die Änderungen in reaktiven Eigenschaften überwachen und es Ihnen ermöglichen, auf Ereignisse und Datenänderungen zu reagieren.
• Beim Vergleich von Watchern mit berechneten Eigenschaften sind berechnete Eigenschaften prägnanter und einfacher zu lesen, was zu einer besseren Leistung und Fehlersuche führt.

JavaScript-Frameworks sind zu einem wichtigen Bestandteil der Webentwicklung geworden. Dies liegt an ihren leicht zugänglichen Funktionen, einschließlich Komponentenarchitektur, Zustandsverwaltung und Routing. Diese tragen dazu bei, den Stress, Aufwand und die Zeit zu reduzieren, die für die Erstellung einer Web-App von Grund auf erforderlich sind.

Vue, eines dieser Frameworks, bietet viele Funktionen, um die Entwicklung zu beschleunigen. Mit der Überwachungsfunktion können Sie die Werte von Variablen und Ausdrücken während der Programmausführung überwachen.

Was sind Beobachter in Vue?

Vue-Watcher sind Funktionen, die Änderungen einer reaktiven Eigenschaft überwachen und entsprechend reagieren. Mit Watchern können Sie auf Ereignisse und Datenänderungen reagieren.

Um einen Watcher zu verwenden, importieren Sie den betrachten Funktion aus dem vue Paket in Ihrem Skript:

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

Sie können jetzt die Watch-Funktion verwenden, um einen Watcher in Ihrer Vue-Komponente zu implementieren. Hier ist ein einfaches Beispiel:

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

Diese einfache Komponente verwendet die Überwachungsfunktion, um die Änderung des Benutzernamens zu überwachen. Der Vorlagenabschnitt des Snippets definiert die HTML-Struktur der Komponente, einschließlich a P Tag, das den Wert der vom Benutzer reaktiven Variablen anzeigt.

Die Vorlage enthält auch ein Schaltflächenelement mit einem Namen ändern Funktion an einen Click-Event-Listener angehängt. Wenn sich die Benutzervariable ändert, löst Vue die Callback-Funktion aus. Die Rückruffunktion zeigt eine Warnung an: „Benutzername wurde von „Chinedu“ in „Victor“ geändert.“

Vergleich von Beobachtern mit berechneten Eigenschaften

Es ist wichtig, den Unterschied zwischen Beobachtern und berechneten Eigenschaften zu verstehen. Obwohl beide in Vue als Reaktivitätstools verwendet werden, sollten Sie sie für unterschiedliche Zwecke verwenden.

Beispielsweise könnten Sie mithilfe von Beobachtern die Summe des Alters eines Vaters und eines Sohns wie folgt berechnen:

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

Diese Vue-Komponente verwendet Beobachter, um die Summe des Alters von Vater und Sohn zu ermitteln. Dazu wird eine neue reaktive Variable erstellt, gesamt. Sie können eine erstellen reaktive Variable, wenn Sie die Composition API von Vue verwenden.

Das Snippet verwendet dann zwei betrachten Funktionen zur Überwachung des Alters von Sohn und Vater. Für jedes Alter, entweder Vater oder Sohn, fasst das Snippet den neuen Wert mit dem Alter des anderen zusammen. Anschließend wird das Ergebnis im gespeichert gesamt reaktive Variable.

Stellen Sie sich das gleiche Szenario im obigen Snippet vor, bei dem berechnete Eigenschaften verwendet werden:

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

Dieser Auszug ist im Vergleich zum vorherigen prägnanter und leichter zu lesen. Das Snippet ruft die Summe des Alters von Vater und Sohn ab und speichert sie in einer berechneten Referenz (Variable). gesamt. Im Vorlagenbereich wird dann die Gesamtvariable angezeigt Interpolation, eine Datenbindungstechnik in Vue.

Selbst wenn Sie mit Beobachtern die Summe der beiden Altersgruppen ermitteln können, ist es besser, dies mit berechneten Eigenschaften zu tun. Die Verwendung von Watchern kann in dieser Situation zu langsameren Ladezeiten und schwierigerem Debuggen führen, einfach weil mehr Code erforderlich ist.

Verwenden Sie Watcher nicht als Ersatz für berechnete Eigenschaften. Verwenden Sie Watcher, um Datenänderungen zu überwachen und darauf zu reagieren, sowie berechnete Eigenschaften, wenn Sie neue Daten aus vorhandenen reaktiven Daten ableiten möchten.

Der sofort Option ist eine Konfiguration, die Sie beim Erstellen eines Watchers verwenden können. Diese Option bestimmt, ob der Watcher seinen Rückruf sofort auslösen soll, nachdem Vue die Komponente gemountet hat.

Hier ist ein Beispiel für eine Komponente, die einen Watcher mit der Option „Immediate“ verwendet:

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

Im obigen Snippet führt der Watcher seinen Rückruf sofort nach der Komponenteninitialisierung aus und protokolliert „Anzahl geändert von undefiniert auf 10“ in der Konsole. Dies zeigt, dass die ursprüngliche Variable undefiniert war, bevor Vue den Wert 10 in die Zählreferenz einfügte.

Die Option „Sofort“ kann in Szenarios nützlich sein, in denen Sie eine erste Aktion oder Initialisierung basierend auf dem aktuellen Wert der überwachten Eigenschaft durchführen möchten. Wenn Sie beispielsweise möchten, dass Ihre App Daten von einer API abruft, sobald Vue eine Komponente bereitstellt.

Die in Vue Watchers verfügbare Deep-Option

Der tief Die Option, die beim Arbeiten mit Beobachtern in Vue verfügbar ist, ermöglicht eine detaillierte Beobachtung von Änderungen innerhalb verschachtelter Objekte oder Arrays. Wenn eingestellt auf WAHR, kann der Beobachter Änderungen innerhalb verschachtelter Eigenschaften erkennen.

Hier ist ein Beispiel einer Vue-Komponente mit der Option „deep“:

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

Das obige Snippet initialisiert die Daten ref mit einem Objekt, das a enthält Länge Eigentum. Das Snippet legt die Option „deep“ auf fest WAHR. Anschließend wird in der Konsole protokolliert, dass sich die Daten seit der Änderung der Längeneigenschaft in geändert haben 43.

Wenn die Option „deep“ nicht auf „true“ gesetzt ist, bemerkt die Überwachungsfunktion keine Änderungen am Objekt. Allerdings verfolgt Vue alle verschachtelten und tiefen Änderungen ohne die Option „deep“, wenn Sie die Datenvariable als reaktives Objekt initialisieren:

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

Die Überwachungsfunktion im obigen Snippet protokolliert in der Konsole, dass sich die Daten geändert haben, da die Datenvariable ein reaktives Objekt ist.

Erstellen Sie bessere Apps mit Vue Watchers

Die Beobachter von Vue können Ihnen dabei helfen, eine feinkörnige Reaktivität in Ihren Anwendungen zu erreichen. Sie steuern, wie Sie Änderungen in Dateneigenschaften beobachten und als Reaktion darauf benutzerdefinierte Logik ausführen können.

Wenn Sie verstehen, wann Watcher verwendet werden sollten, welche Unterschiede sie zu berechneten Eigenschaften haben und welche Optionen wie „Immediate“ und „Deep“ verfügbar sind, können Sie Ihre Fähigkeit, sehr reaktionsfähige Vue-Anwendungen zu erstellen, erheblich verbessern.