快捷導(dǎo)航

關(guān)于Vue中的watch監(jiān)視屬性

更新時間：2023年04月22日 11:04:33 作者：風(fēng)落不歸處

這篇文章主要介紹了關(guān)于Vue中的watch監(jiān)視屬性,Vue中的watch默認(rèn)不監(jiān)視對象內(nèi)部值的改變,當(dāng)被監(jiān)視的屬性變化時，回調(diào)函數(shù)自動調(diào)用，進(jìn)行相關(guān)操作,需要的朋友可以參考下

一、監(jiān)視屬性watch

1.當(dāng)被監(jiān)視的屬性變化時，回調(diào)函數(shù)自動調(diào)用，進(jìn)行相關(guān)操作

2.監(jiān)視的屬性必須存在，才能進(jìn)行監(jiān)視

3.監(jiān)視的兩種寫法

（1）new Vue時傳入watch配置

（2）通過vm.$watch監(jiān)視

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天氣案例_監(jiān)視屬性</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				監(jiān)視屬性watch：
					1.當(dāng)被監(jiān)視的屬性變化時, 回調(diào)函數(shù)自動調(diào)用, 進(jìn)行相關(guān)操作
					2.監(jiān)視的屬性必須存在，才能進(jìn)行監(jiān)視??！
					3.監(jiān)視的兩種寫法：
							(1).new Vue時傳入watch配置
							(2).通過vm.$watch監(jiān)視
		 -->
		<!-- 準(zhǔn)備好一個容器-->
		<div id="root">
			<h2>今天天氣很{{info}}</h2>
			<button @click="changeWeather">切換天氣</button>
		</div>
	</body>
 
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產(chǎn)提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎熱' : '涼爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			/* watch:{
				isHot:{
					immediate:true, //初始化時讓handler調(diào)用一下
					//handler什么時候調(diào)用？當(dāng)isHot發(fā)生改變時。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}
			} */
		})
 
		vm.$watch('isHot',{
			immediate:true, //初始化時讓handler調(diào)用一下
			//handler什么時候調(diào)用？當(dāng)isHot發(fā)生改變時。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
	</script>
</html>

二、深度監(jiān)視

1.Vue中的watch默認(rèn)不監(jiān)視對象內(nèi)部值的改變（一層）

2.配置deep:true可以監(jiān)視對象內(nèi)部值的改變（多層）

備注：

vue自身可以監(jiān)視對象內(nèi)部值的改變，但vue提供的watch默認(rèn)不可以
使用watch時根據(jù)數(shù)據(jù)的具體結(jié)構(gòu)，決定是否采用深度監(jiān)視

天氣案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天氣案例_深度監(jiān)視</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				深度監(jiān)視：
						(1).Vue中的watch默認(rèn)不監(jiān)測對象內(nèi)部值的改變（一層）。
						(2).配置deep:true可以監(jiān)測對象內(nèi)部值改變（多層）。
				備注：
						(1).Vue自身可以監(jiān)測對象內(nèi)部值的改變，但Vue提供的watch默認(rèn)不可以！
						(2).使用watch時根據(jù)數(shù)據(jù)的具體結(jié)構(gòu)，決定是否采用深度監(jiān)視。
		 -->
		<!-- 準(zhǔn)備好一個容器-->
		<div id="root">
			<h2>今天天氣很{{info}}</h2>
			<button @click="changeWeather">切換天氣</button>
			<hr/>
			<h3>a的值是:{{numbers.a}}</h3>
			<button @click="numbers.a++">點(diǎn)我讓a+1</button>
			<h3>b的值是:{{numbers.b}}</h3>
			<button @click="numbers.b++">點(diǎn)我讓b+1</button>
			<button @click="numbers = {a:666,b:888}">徹底替換掉numbers</button>
			{{numbers.c.d.e}}
		</div>
	</body>
 
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產(chǎn)提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
				numbers:{
					a:1,
					b:1,
					c:{
						d:{
							e:100
						}
					}
				}
			},
			computed:{
				info(){
					return this.isHot ? '炎熱' : '涼爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				isHot:{
					// immediate:true, //初始化時讓handler調(diào)用一下
					//handler什么時候調(diào)用？當(dāng)isHot發(fā)生改變時。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				},
				//監(jiān)視多級結(jié)構(gòu)中某個屬性的變化
				/* 'numbers.a':{
					handler(){
						console.log('a被改變了')
					}
				} */
				//監(jiān)視多級結(jié)構(gòu)中所有屬性的變化
				numbers:{
					deep:true,
					handler(){
						console.log('numbers改變了')
					}
				}
			}
		})
 
	</script>
</html>

三、監(jiān)視屬性簡寫

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天氣案例_監(jiān)視屬性_簡寫</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 準(zhǔn)備好一個容器-->
		<div id="root">
			<h2>今天天氣很{{info}}</h2>
			<button @click="changeWeather">切換天氣</button>
		</div>
	</body>
 
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產(chǎn)提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎熱' : '涼爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				//正常寫法
				/* isHot:{
					// immediate:true, //初始化時讓handler調(diào)用一下
					// deep:true,//深度監(jiān)視
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}, */
				//簡寫
				/* isHot(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue,this)
				} */
			}
		})
 
		//正常寫法
		/* vm.$watch('isHot',{
			immediate:true, //初始化時讓handler調(diào)用一下
			deep:true,//深度監(jiān)視
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}) */
 
		//簡寫
		/* vm.$watch('isHot',(newValue,oldValue)=>{
			console.log('isHot被修改了',newValue,oldValue,this)
		}) */
 
	</script>
</html>

到此這篇關(guān)于關(guān)于Vue中的watch監(jiān)視屬性的文章就介紹到這了,更多相關(guān)Vue中的watch監(jiān)視屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: