Vue3 Watch-Eigenschaften
In diesem Kapitel werden wir Vue3 watch-Eigenschaften vorstellenwatch, wir könnenwatchverwenden, um auf Datenänderungen zu reagieren.
watchEs wird verwendet, um Änderungen an reaktiven Eigenschaften zu überwachen und bestimmte Operationen auszuführen, wenn sich Eigenschaften ändern. Es ist ein reaktiver Mechanismus in Vue, der es Ihnen ermöglicht, entsprechend zu reagieren, wenn sich Daten ändern, und benutzerdefinierte Logik auszuführen.
watchEs bietet mehr Kontrolle und Flexibilität, wenn sich reaktive Eigenschaften ändern, sodass Ihre Komponenten besser auf Datenänderungen reagieren und entsprechende Logik ausführen können.
Das folgende Beispiel implementiert einen Zähler mit watch:
Beispiel
<p style = "font-size:25px;">Zähler: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">Klick mich</button>
</div>
<script>
const app = {
data() {
return {
counter: 1
}
}
}
vm = Vue.createApp(app).mount('#app')
vm.$watch('counter', function(nval, oval) {
alert('Zählerwert geändert:' + oval + ' geändert zu ' + nval + '!');
});
</script>
Selbst ausprobieren »
Das folgende Beispiel führt eine Umrechnung zwischenKilometernundMeterndurch:
Beispiel
Kilometer: <input type = "text" v-model = "kilometers" @focus="currentlyActiveField = 'kilometers'">
Reis: <input type = "text" v-model = "meters" @focus="currentlyActiveField = 'meters'">
</div>
<p id="info"></p>
<script>
const app = {
data() {
return {
kilometers : 0,
meters:0
}
},
watch : {
kilometers:function(newValue, oldValue) {
// Prüfen, ob es das aktuelle Eingabefeld ist
if (this.currentlyActiveField === 'kilometers') {
this.meters = newValue * 1000
}
},
meters : function (newValue, oldValue) {
// Prüfen, ob es das aktuelle Eingabefeld ist
if (this.currentlyActiveField === 'meters') {
this.kilometers = newValue/ 1000;
}
}
}
}
vm = Vue.createApp(app).mount('#app')
vm.$watch('kilometers', function (newValue, oldValue) {
// Dieser Callback wird aufgerufen, nachdem sich vm.kilometers geändert hat
document.getElementById ("info").innerHTML = "Wert vor der Änderung: " + oldValue + ", Wert nach der Änderung: " + newValue;
})
</script>
Selbst ausprobieren »
Klicken Sie auf die Schaltfläche "Probieren Sie es selbst", um das Online-Beispiel anzuzeigen.
Im obigen Code haben wir zwei Eingabefelder erstellt. In der data-Eigenschaft sind die Anfangswerte von kilometers und meters beide 0. Das watch-Objekt erstellt zwei Überwachungsmethoden für das data-Objekt: kilometers und meters.
Wenn wir Daten in das Eingabefeld eingeben, überwacht watch Datenänderungen in Echtzeit und ändert seinen eigenen Wert. Sie können sich die Videodemonstration unten ansehen:
Verwendung von watch beim asynchronen Laden
Zum Laden asynchroner Daten bietet Vue eine allgemeinere Methode über die watch-Option, um auf Datenänderungen zu reagieren.
Das folgende Beispiel verwendet die axios-Bibliothek, die später ausführlich vorgestellt wird.
Beispiel
<!--diese Funktionen, um leichtgewichtig zu bleiben. Dies ermöglicht es Ihnen auch, die Tools frei zu wählen, mit denen Sie besser vertraut sind.-->
<script src="https://cdn.staticfile.org/axios/0.27.2/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
<script>
const watchExampleVM = Vue.createApp({
data() {
return {
question: '',
answer: 'Jede Frage muss mit einem ?-Zeichen enden.'
}
},
watch: {
// Immer wenn sich die Frage ändert, wird diese Funktion ausgeführt, wobei die Frage mit einem ?-Zeichen enden muss, kompatibel sowohl mit chinesischem als auch englischem ?
question(newQuestion, oldQuestion) {
if (newQuestion.indexOf('?') > -1 || newQuestion.indexOf('？') > -1) {
this.getAnswer()
}
}
},
methods: {
getAnswer() {
this.answer = 'Lädt...'
axios
.get('/try/ajax/json_vuetest.php')
.then(response => {
this.answer = response.data.answer
})
.catch(error => {
this.answer = 'Fehler! Zugriff auf die API nicht möglich. ' + error
})
}
}
}).mount('#watch-example')
</script>
Selbst ausprobieren »
Verwendungsübersicht
watch ist ein von Vue 3 bereitgestellter reaktiver Datenüberwachungsmechanismus, der einzelne oder mehrere Eigenschaften überwachen kann.
Sie können Datenänderungen durch Übergabe einer Callback-Funktion behandeln, mit Unterstützung für Optionen wie tiefes Überwachen und sofortige Ausführung.
1. Grundlegende Verwendung
In Vue 3 wird die watch-Funktion verwendet, um reaktive Eigenschaften zu überwachen.
Wenn sich der Wert der überwachten Eigenschaft ändert, löst Vue die Ausführung der Callback-Funktion aus.
Beispiel
export default {
setup() {
const state = reactive({
count: 0
});
watch(
() => state.count, // Die überwachte Eigenschaft
(newVal, oldVal) => { // Die Callback-Funktion bei Änderung
console.log(`count changed from ${oldVal} to ${newVal}`);
}
);
return {
state
};
}
};
2. Mehrere reaktive Eigenschaften überwachen
Wenn Sie mehrere reaktive Eigenschaften gleichzeitig überwachen möchten, können Sie ein Array übergeben, das die zu überwachenden Eigenschaften enthält:
Beispiel
export default {
setup() {
const state = reactive({
count: 0,
name: 'Vue3'
});
watch(
[() => state.count, () => state.name], // Mehrere Eigenschaften überwachen
([newCount, newName], [oldCount, oldName]) => {
console.log(`count changed from ${oldCount} to ${newCount}`);
console.log(`name changed from ${oldName} to ${newName}`);
}
);
return {
state
};
}
};
3. Tiefes Überwachen
Wenn Sie ein Objekt oder Array überwachen möchten und dessen verschachtelte Eigenschaften überwachen wollen, können Sie die Optiondeep: trueverwenden. Damit werden alle Eigenschaftsänderungen des Objekts überwacht.
Beispiel
export default {
setup() {
const state = reactive({
user: {
name: 'Alice',
age: 25
}
});
watch(
() => state.user, // Das gesamte Objekt überwachen
(newVal, oldVal) => {
console.log('User object changed:', newVal, oldVal);
},
{ deep: true } // Tiefes Beobachten aktivieren
);
return {
state
};
}
};
4. Sofortige Ausführung
Standardmäßig löst watch den Callback nur aus, wenn sich der beobachtete Wert ändert. Wenn du möchtest, dass der Callback sofort ausgeführt wird, wenn die Komponente geladen wird, kannst duimmediate: true setzen。
Beispiel
export default {
setup() {
const state = reactive({
count: 0
});
watch(
() => state.count, // Eigenschaft beobachten
(newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`);
},
{ immediate: true } // Sofortige Ausführung
);
return {
state
};
}
};
5. Asynchrone Operationen
Wenn du asynchrone Operationen in watch ausführen musst, kannst du async und await direkt in der Callback-Funktion verwenden, wodurch du Operationen wie API-Anfragen, Datenspeicherung usw. ausführen kannst.
Beispiel
export default {
setup() {
const state = reactive({
count: 0
});
watch(
() => state.count,
async (newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`);
// Angenommen, eine asynchrone Anfrage wird gestellt
await fetch(`https://api.example.com/count/${newVal}`);
}
);
return {
state
};
}
};
6. Mehrere Eigenschaften beobachten und die handler-Funktion verwenden
Du kannst watch auch als Handler verwenden, um mehrere Eigenschaften zu überwachen, wie folgt:
Beispiel
export default {
setup() {
const state = reactive({
count: 0,
name: 'Vue3'
});
const handler = ([newCount, newName], [oldCount, oldName]) => {
console.log(`count geändert: ${oldCount} → ${newCount}`);
console.log(`name geändert: ${oldName} → ${newName}`);
};
watch([() => state.count, () => state.name], handler);
return {
state
};
}
};
7. watchEffect - Vereinfachte Überwachung
Vue 3 bietet außerdem die watchEffect-API, die prägnanter als watch ist. Sie kann Änderungen in reaktiven Daten automatisch verfolgen, ohne dass eine bestimmte Datenquelle angegeben werden muss.
Beispiel
export default {
setup() {
const state = reactive({
count: 0
});
watchEffect(() => {
console.log(`count ist: ${state.count}`);
});
return {
state
};
}
};
watchEffect erkennt automatisch Änderungen anstate.countund löst den Callback aus, wenn Änderungen auftreten.
8. Die flush-Option
Die flush-Option wird verwendet, um den Ausführungszeitpunkt von Watch-Callbacks zu steuern.
Standardmäßig werden Watch-Callbacks ausgeführt, nachdem das DOM aktualisiert wurde. Wenn Sie den Callback vor der Aktualisierung ausführen möchten, können Sieflush: 'pre' verwenden。
Beispiel
export default {
setup() {
const state = reactive({
count: 0
});
watch(
() => state.count,
(newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`);
},
{ flush: 'pre' } // Führe den Callback vor der Aktualisierung aus
);
return {
state
};
}
};