What does vue's watch do?

In vue, watch is used to monitor whether the data in the data has been modified. Once modified, it can perform some other operations. Watch is a general method provided internally by Vue for listening functions. It can respond to data changes and drive some operations through specific data changes.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

What is watch used for?

Vue provides a more general method to respond to data changes through the watch option. This approach is most useful when you need to perform asynchronous or expensive operations when data changes.

What is watch?

An object, the key is the expression to be observed, and the value is the corresponding callback function. The value can also be a method name, or an object containing options. The Vue instance will call $watch() when instantiated, traversing each property of the watch object. Document transmission

Example:

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

##How to use watch

First: Conventional usage

(1) Treat the name value to be monitored as the method name to monitor. [First way of writing]

<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;
		};
	},
	watch: {
		name(newVal, oldVal) {
			console.log(&#39;newVal&#39;, newVal);// 1234
			console.log(&#39;oldVal&#39;, oldVal);// 123
		}
	}
};
</script>

<style></style>

(2) Treat the name value to be monitored as an object and use the hanler method to monitor. [Second way of writing]

<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;
		};
	},
	watch: {
		name:{
			handler(newVal,oldVal){
				console.log(&#39;newVal&#39;,newVal); // 1234
				console.log(&#39;oldVal&#39;,oldVal); // 123
			}
		}
	}
};
</script>

<style></style>

The above two ways of writing are common usages of watch listeners. This usage has a characteristic that when the value is bound for the first time, the monitoring will not be executed. Functions are executed only when the value changes. If we need to execute the listening function when the value is initially bound, we need to use the immediate attribute.

Next, let’s talk about more advanced usage.

Second: Advanced usage

For example, when the parent component dynamically transfers values ​​​​to the child component, the child component props are first obtained from the parent component. When the default value is used, the function also needs to be executed. In this case, the immediate attribute needs to be set to true and used in combination with the handler method.

When the immediate attribute is set to true, it will listen at all times regardless of whether the value changes;

When the immediate attribute is set to false, in normal usage, it will listen only when the value changes.

<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;
		};
	},
	watch: {
		name: {
			handler(newVal, oldVal) {
				console.log(&#39;newVal&#39;, newVal);
				console.log(&#39;oldVal&#39;, oldVal);
			},
			immediate: true
		}
	}
};
</script>

<style></style>

Immediate execution:

When the value changes:

The third type : Super advanced usage (deep deep monitoring)

(1) The above two methods can be used to monitor changes in ordinary variables, but when the variable value is to be monitored as an object, it will not work.

For example, we cannot monitor changes in the internal properties of the form object.

<template>
	<el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></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>

From the results, we did not see any output printing, so the ordinary watch method cannot monitor changes in the internal properties of the object.

So, what should we do to monitor the changes in the internal properties of the object?

The watch method provides a deep attribute (deep monitoring), which can monitor changes in the internal attributes of the object.

<template>
	<el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></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>

Set deep: true to monitor changes in the form. If the form has more attributes, all attributes of the form will be added. This listener will execute the handler every time the attribute value changes.

When the deep attribute value is true, you can monitor changes within the object's attributes;

When the deep attribute value is false, you cannot monitor it.

(2) If we only need to monitor a certain attribute value in the object, we can use:

string form to monitor the object attribute ,

this During the monitoring process, you do not need to use deep to monitor in depth, you can monitor changes in a certain attribute in the object.

<template>
	<el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></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>

The fourth type: expansion (monitoring array)

(1) (one-dimensional, multi-dimensional) array changes are not Need deep monitoring

<template>
	<el-card class="box-card"><el-input v-model="name" @input="inputFn" style="width: 30%;"></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 class="box-card"><el-input v-model="name" @input="inputFn" style="width: 30%;"></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前端开发、编程基础视频）

The above is the detailed content of What does vue's watch do?. For more information, please follow other related articles on the PHP Chinese website!