vue的watch是做什麼的

在vue中，watch用來監聽data裡面的資料是否被修改，一旦修改就可以執行一些其他的操作。 watch是vue內部提供的一個用於偵聽功能的通用的方法，可回應資料的變化，透過特定的資料變化來驅動一些操作。

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

watch是用來做什麼的？

Vue 透過 watch 選項提供了一個更通用的方法，來回應資料的變化。當需要在資料變更時執行非同步或開銷較大的操作時，這個方式是最有用的。

watch是什麼？

一個對象，鍵是需要觀察的表達式，值是對應回呼函數。值也可以是方法名，或是包含選項的物件。 Vue 實例會在實例化時呼叫 $watch()，遍歷 watch 物件的每一個 property。 文件傳送

範例：

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

#watch的使用方法

第一種：常規用法

（1）把要監聽的name值看作方法名，來進行監聽。 【第一種寫法】

<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）把要監聽的name值看作對象，利用hanler方法來進行監聽。 【第二種寫法】

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

以上兩種寫法是watch監聽器的普通用法，這種用法有一個特點，就是當值第一次綁定的時候，不會執行監聽函數，只有當值改變時才會執行。如果我們需要在最初綁定值的時侯，也執行監聽函數，就需要用到immediate屬性。

下面，我們就往高級一點的用法上說。

第二種：進階用法

例如，當父元件向子元件動態傳值時，子元件props首次取得到父元件傳來的預設值時，也需要執行函數，此時就需要將immediate屬性設為true，結合handler方法使用。

當設定immediate屬性為true時，無論值是否改變，時刻都會監聽；

當設定immediate屬性為false時，常規用法，只有值改變才會監聽。

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

立即執行：

 值改變時：

第三種：超高級用法（deep 深度監聽）

（1）監聽普通變數的變化可以使用以上兩種方法，但是要監聽變數值是某物件的時候，則不起作用。

例如，我們監聽form物件內部屬性的變化，是監聽不到的。

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

則，從結果來看，我們沒有看到任何的輸出列印，所以普通的watch方法無法監聽到物件內部屬性的變化。

那麼，我們該怎麼辦才能監聽到物件內部屬性的變化呢？

watch方法提供了一個deep屬性（深度監聽），該屬性可以監聽到物件內部屬性的改變。

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

設定deep: true 則可以監聽到form的變化，如果form有較多屬性的話，此時會給form的所有屬性都會加上這個監聽器，每個屬性值的變化都會執行handler。 

當deep屬性值為true時，就可以監聽到物件屬性內部的改變；

當deep屬性值為false時，則監聽到。

（2）如果只需要監聽物件中的某一個屬性值時，我們可以使用：字串的形式監聽物件屬性，

這個監聽過程，不需要使用deep去深度監聽，就可以監聽物件中某個屬性的變化。

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

 第四種：擴展（監聽數組）

（1）（一維、多維）數組的變化不需要深度監聽

<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前端开发、编程基础视频）

以上是vue的watch是做什麼的的詳細內容。更多資訊請關注PHP中文網其他相關文章！