Vue watch监视属性

成虚员

已于 2023-05-09 16:59:58 修改

阅读量49

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-04-14 17:29:46 首次发布

本文链接：https://blog.csdn.net/m0_48546501/article/details/130157094

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Vue 监视属性

当被监视的属性变化时，回调函数handler()自动调用，进行相关操作
监视的属性必须存在，才能进行监视
监视的两种方法：
（1）.new Vue时传入watch配置
（2）通过vm.$watch监视

<body>
	<div id="root">
		<h2>今天的天气很{{info}}</h2>
		<button @click="changeWeather">切换天气</button>
	</div>
</body>

<script>
	new Vue({
		el:"#root",
		data:{
			isHot:true
		},
		methods:{
			changeWeather(){
				 this.isHot = !this.isHot
			}
		},
		computed:{
			info(){
				return this.isHot ? '炎热' : '凉爽'
			}
		},
		watch:{
			isHot:{
				//初始化时让handler调用一下
				immediate:true,
				//handler什么时候调用？当isHot发生改变时
				//newValue是修改后的值，oldValue修改前的值
				handler(newValue,oldValue){
					
				}
			}
		}
	})
</script>

另一种办法

vm.$watch('isHot',{
	immediate:true,
	handler(newValue,oldValue){
					
	}
})

深度监视

deep:true

<body>
	<div id="root">
		<h2>{{number.a}}</h2>
		<button @click="number.a++">a+1</button>
	</div>
</body>

<script>
	new Vue({
		el:"#root",
		data:{
			number:{
				a:100
				b:200		
			}
		},
		watch:{
			number:{
				deep:true,
				handler(){
					console.log('number改变了');
				}
			}
		}
	})
</script>

监视属性简写

当所监视的属性只需要handler时，我们就可以使用简写形式

watch:{
	number(newValue,oldValue){
		console.log('123')
	}
}

另一种配置监视属性的方法

vm.$watch('number',{
	immediate:true,
	deep:true,
	handler(newValue,oldValue){
		console.log('abc');
	}
})

//简写
vm.$watch('isHot',function(newValue,oldValue){
	console.log('abc')
})