Was macht die Uhr von Vue?

In Vue wird Watch verwendet, um zu überwachen, ob die Daten in den Daten geändert wurden. Nach der Änderung können einige andere Vorgänge ausgeführt werden. Watch ist eine allgemeine Methode, die Vue intern für Abhörfunktionen bereitstellt. Sie kann auf Datenänderungen reagieren und bestimmte Vorgänge durch bestimmte Datenänderungen steuern.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Wozu dient die Uhr?

Vue bietet eine allgemeinere Methode, um über die Überwachungsoption auf Datenänderungen zu reagieren. Dieser Ansatz ist am nützlichsten, wenn Sie bei Datenänderungen asynchrone oder teure Vorgänge ausführen müssen.

Was ist Uhr?

Bei einem Objekt ist der Schlüssel der Ausdruck, der beobachtet werden muss, und der Wert ist die entsprechende Rückruffunktion. Der Wert kann auch ein Methodenname oder ein Objekt sein, das Optionen enthält. Die Vue-Instanz ruft bei der Instanziierung $watch() auf und durchläuft dabei jede Eigenschaft des Watch-Objekts. Dokumentenübertragung

Beispiel:

<template>
	<el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card>
</template>
 
<script>
export default {
	data() {
		return {
			name: &#39;123&#39;
		};
	}
};
</script>
 
<style></style>

So verwenden Sie watch

Erste Methode: Konventionelle Verwendung

(1) Behandeln Sie den zu überwachenden Namenswert als Methodennamenmonitor. [Erste Schreibweise]

<template>
	<el-card><el-input></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			name: &#39;123&#39;
		};
	},
	watch: {
		name(newVal, oldVal) {
			console.log(&#39;newVal&#39;, newVal);// 1234
			console.log(&#39;oldVal&#39;, oldVal);// 123
		}
	}
};
</script>

<style></style>

(2) Behandeln Sie den zu überwachenden Namenswert als Objekt und verwenden Sie zur Überwachung die Hanler-Methode. [Zweite Schreibweise]

<template>
	<el-card><el-input></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			name: &#39;123&#39;
		};
	},
	watch: {
		name:{
			handler(newVal,oldVal){
				console.log(&#39;newVal&#39;,newVal); // 1234
				console.log(&#39;oldVal&#39;,oldVal); // 123
			}
		}
	}
};
</script>

<style></style>

Die beiden oben genannten Schreibweisen sind übliche Verwendungen von Watch-Listenern. Diese Verwendung hat die Eigenschaft, dass die Listening-Funktion nicht ausgeführt wird, wenn der Wert zum ersten Mal gebunden wird Wert tritt auf. Wird nur ausgeführt, wenn er geändert wird. Wenn wir die Listening-Funktion ausführen müssen, wenn der Wert anfänglich gebunden ist, müssen wir das Attribut „immediate“ verwenden.

Lassen Sie uns nun über die fortgeschrittenere Nutzung sprechen.

Zweitens: Erweiterte Verwendung

Wenn beispielsweise die übergeordnete Komponente dynamisch Werte an die untergeordnete Komponente überträgt, müssen die Requisiten der untergeordneten Komponente die Funktion auch ausführen, wenn sie zum ersten Mal den von der übergebenen Standardwert erhält Zu diesem Zeitpunkt ist es erforderlich, das unmittelbare Attribut auf true zu setzen und es in Verbindung mit der Handler-Methode zu verwenden.

Wenn das Immediate-Attribut auf „true“ gesetzt ist, wird es immer lauschen, unabhängig davon, ob sich der Wert ändert.

Wenn das Immediate-Attribut auf „false“ gesetzt ist, wird es bei normaler Verwendung nur lauschen, wenn sich der Wert ändert.

<template>
	<el-card><el-input></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			name: &#39;123&#39;
		};
	},
	watch: {
		name: {
			handler(newVal, oldVal) {
				console.log(&#39;newVal&#39;, newVal);
				console.log(&#39;oldVal&#39;, oldVal);
			},
			immediate: true
		}
	}
};
</script>

<style></style>

Sofort ausführen:

Wenn sich der Wert ändert:

Dritte Methode: Super erweiterte Verwendung (Deep Deep Monitoring)

(1) Um Änderungen in gewöhnlichen Variablen zu überwachen, können Sie die verwenden Die beiden oben genannten Methoden funktionieren jedoch nicht, wenn der Wert der überwachten Variablen ein Objekt ist.

Wenn wir beispielsweise Änderungen in den internen Eigenschaften des Formularobjekts überwachen, können wir diese nicht überwachen.

<template>
	<el-card><el-input></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: &#39;123&#39;
			}
		};
	},
	watch: {
		form: {
			handler(newVal, oldVal) {
				console.log(&#39;newVal&#39;, newVal);
				console.log(&#39;oldVal&#39;, oldVal);
			}
		}
	}
};
</script>

<style></style>

Dann haben wir, den Ergebnissen nach zu urteilen, keinen Ausgabedruck gesehen, sodass die normale Überwachungsmethode Änderungen in den internen Eigenschaften des Objekts nicht überwachen kann.

Was können wir also tun, um die Änderungen in den internen Eigenschaften des Objekts zu überwachen?

Die Überwachungsmethode bietet ein tiefes Attribut (Deep Listening), mit dem Änderungen in den internen Attributen des Objekts überwacht werden können.

<template>
	<el-card><el-input></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: &#39;123&#39;
			}
		};
	},
	watch: {
		form: {
			handler(newVal, oldVal) {
				console.log(&#39;newVal&#39;, newVal);
				console.log(&#39;oldVal&#39;, oldVal);
			},
			deep: true
		}
	}
};
</script>

<style></style>

Deep: true, um Änderungen im Formular zu überwachen, wird dieser Listener zu allen Attributen des Formulars hinzugefügt und jede Änderung im Attributwert wird ausgeführt.

Wenn der tiefe Attributwert wahr ist, können Sie Änderungen innerhalb der Attribute des Objekts überwachen.

Wenn der tiefe Attributwert falsch ist, können Sie ihn nicht überwachen.

(2) Wenn wir nur einen bestimmten Attributwert im Objekt überwachen müssen, können wir Folgendes verwenden: Das Objektattribut in Form einer Zeichenfolge abhören,

In diesem Überwachungsprozess ist dies nicht erforderlich Verwenden Sie „deep“, um eine Änderung in einem Attribut eines Objekts eingehend zu überwachen.

<template>
	<el-card><el-input></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: &#39;123&#39;
			}
		};
	},
	watch: {
		&#39;form.name&#39;: {
			handler(newVal, oldVal) {
				console.log(&#39;newVal&#39;, newVal);
				console.log(&#39;oldVal&#39;, oldVal);
			}
		}
	}
};
</script>

<style></style>

Der vierte Typ: Erweiterung (Überwachungsarray)

(1) (eindimensionale, mehrdimensionale) Änderungen im Array erfordern keine tiefe Überwachung

<template>
	<el-card><el-input></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			name: &#39;123&#39;,
			arr1: [1, 2, 3],
			arr2: [1, 2, 3, [4, 5]]
		};
	},
	watch: {
		arr1(newVal, oldVal) {
			console.log(&#39;newVal1&#39;, newVal);
			console.log(&#39;oldVal1&#39;, oldVal);
		},
		arr2(newVal, oldVal) {
			console.log(&#39;newVal2&#39;, newVal);
			console.log(&#39;oldVal2&#39;, oldVal);
		}
	},
	methods: {
		inputFn(e) {
			this.arr1.push(e);
			this.arr2.push(e);
		}
	}
};
</script>

<style></style>

 （2）数组对象中对象属性变化监测需要使用deep:true深度监听，多少层内产生变化都可以监测到。

<template>
	<el-card><el-input></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			name: &#39;123&#39;,
			arr1: [
				{
					id: 1,
					sex: 11
				}
			],
			arr2: [
				{
					id: 2,
					sex: 22,
					list: [
						{
							id: 3,
							sex: 33
						}
					]
				}
			]
		};
	},
	watch: {
		arr1: {
			handler(newVal, oldVal) {
				console.log(&#39;newVal1&#39;, newVal);
				console.log(&#39;oldVal1&#39;, oldVal);
			},
			deep: true
		},
		arr2: {
			handler(newVal, oldVal) {
				console.log(&#39;newVal2&#39;, newVal);
				console.log(&#39;oldVal2&#39;, oldVal);
			},
			deep: true
		}
	},
	methods: {
		inputFn(e) {
			this.arr1[0].sex = e;
			this.arr2[0].list[0].sex = e;
		}
	}
};
</script>

<style></style>

 

（学习视频分享：web前端开发、编程基础视频）

Das obige ist der detaillierte Inhalt vonWas macht die Uhr von Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!