vue的watch是什么及怎么使用

本篇內(nèi)容介紹了“vue的watch是什么及怎么使用”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

在vue中，watch用于監(jiān)聽data里面的數(shù)據(jù)是否被修改，一旦修改就可以執(zhí)行一些其他的操作。watch是vue內(nèi)部提供的一個用于偵聽功能的通用的方法，可響應(yīng)數(shù)據(jù)的變化，通過特定的數(shù)據(jù)變化驅(qū)動一些操作。

watch是用來做什么的？

Vue 通過 watch 選項(xiàng)提供了一個更通用的方法，來響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的。

watch是什么？

一個對象，鍵是需要觀察的表達(dá)式，值是對應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對象。Vue 實(shí)例將會在實(shí)例化時調(diào)用 $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: '123'
		};
	}
};
</script>
 
<style></style>

watch的使用方法

第一種：常規(guī)用法

（1）把要監(jiān)聽的name值看作方法名，來進(jìn)行監(jiān)聽。【第一種寫法】

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

<style></style>

（2）把要監(jiān)聽的name值看作對象，利用hanler方法來進(jìn)行監(jiān)聽?！镜诙N寫法】

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

<style></style>

以上兩種寫法是watch監(jiān)聽器的普通用法，這種用法有一個特點(diǎn)，就是當(dāng)值第一次綁定的時候，不會執(zhí)行監(jiān)聽函數(shù)，只有當(dāng)值發(fā)生改變時才會執(zhí)行。如果我們需要在最初綁定值的時侯，也執(zhí)行監(jiān)聽函數(shù)，則就需要用到immediate屬性。

下面，我們就往高級一點(diǎn)的用法上講。

第二種：高級用法

比如，當(dāng)父組件向子組件動態(tài)傳值時，子組件props首次獲取到父組件傳來的默認(rèn)值時，也需要執(zhí)行函數(shù)，此時就需要將immediate屬性設(shè)置為true，結(jié)合handler方法使用。

當(dāng)設(shè)置immediate屬性為true時，無論值是否發(fā)生改變，時刻都會監(jiān)聽；

當(dāng)設(shè)置immediate屬性為false時，常規(guī)用法，只有值發(fā)生改變才會監(jiān)聽。

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

<style></style>

立即執(zhí)行：

值改變時：

第三種：超高級用法（deep 深度監(jiān)聽）

（1）監(jiān)聽普通變量的變化可以使用以上兩種方法，但是要監(jiān)聽變量值是某對象的時候，則不起作用。

例如，我們監(jiān)聽form對象內(nèi)部屬性的變化，是監(jiān)聽不到的。

<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: '123'
			}
		};
	},
	watch: {
		form: {
			handler(newVal, oldVal) {
				console.log('newVal', newVal);
				console.log('oldVal', oldVal);
			}
		}
	}
};
</script>

<style></style>

則，從結(jié)果來看，我們沒有看到任何的輸出打印，所以普通的watch方法無法監(jiān)聽到對象內(nèi)部屬性的變化。

那么，我們該怎么辦才能監(jiān)聽到對象內(nèi)部屬性的變化呢？

watch方法提供了一個deep屬性（深度監(jiān)聽），該屬性可以監(jiān)聽到對象內(nèi)部屬性的改變。

<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: '123'
			}
		};
	},
	watch: {
		form: {
			handler(newVal, oldVal) {
				console.log('newVal', newVal);
				console.log('oldVal', oldVal);
			},
			deep: true
		}
	}
};
</script>

<style></style>

設(shè)置deep: true 則可以監(jiān)聽到form的變化，如果form有較多屬性的話，此時會給form的所有屬性都會加上這個監(jiān)聽器，每個屬性值的變化都會執(zhí)行handler。

當(dāng)deep屬性值為true時，就可以監(jiān)聽到對象屬性內(nèi)部的改變；

當(dāng)deep屬性值為false時，則監(jiān)聽不到。

（2）如果只需要監(jiān)聽對象中的某一個屬性值時，我們可以使用：字符串的形式監(jiān)聽對象屬性，

這個監(jiān)聽過程，不需要使用deep去深度監(jiān)聽，就可以監(jiān)聽對象中某個屬性的變化。

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

<style></style>

第四種：擴(kuò)展（監(jiān)聽數(shù)組）

（1）（一維、多維）數(shù)組的變化不需要深度監(jiān)聽

<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: '123',
			arr1: [1, 2, 3],
			arr2: [1, 2, 3, [4, 5]]
		};
	},
	watch: {
		arr1(newVal, oldVal) {
			console.log('newVal1', newVal);
			console.log('oldVal1', oldVal);
		},
		arr2(newVal, oldVal) {
			console.log('newVal2', newVal);
			console.log('oldVal2', oldVal);
		}
	},
	methods: {
		inputFn(e) {
			this.arr1.push(e);
			this.arr2.push(e);
		}
	}
};
</script>

<style></style>

（2）數(shù)組對象中對象屬性變化監(jiān)測需要使用deep:true深度監(jiān)聽，多少層內(nèi)產(chǎn)生變化都可以監(jiān)測到。

<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: '123',
			arr1: [
				{
					id: 1,
					sex: 11
				}
			],
			arr2: [
				{
					id: 2,
					sex: 22,
					list: [
						{
							id: 3,
							sex: 33
						}
					]
				}
			]
		};
	},
	watch: {
		arr1: {
			handler(newVal, oldVal) {
				console.log('newVal1', newVal);
				console.log('oldVal1', oldVal);
			},
			deep: true
		},
		arr2: {
			handler(newVal, oldVal) {
				console.log('newVal2', newVal);
				console.log('oldVal2', oldVal);
			},
			deep: true
		}
	},
	methods: {
		inputFn(e) {
			this.arr1[0].sex = e;
			this.arr2[0].list[0].sex = e;
		}
	}
};
</script>

<style></style>

“vue的watch是什么及怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！