Vue中watch数据监听用法笔记

最新推荐文章于 2023-05-21 18:02:24 发布

Cherryup1

最新推荐文章于 2023-05-21 18:02:24 发布

阅读量1.1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_38304572/article/details/122255128

版权

1.当被监视的属性发生变化时，回调函数自动调用，进行相关操作

2.监视的属性必须存在才能被监视，如果是不存在的不会报错，输出undefined，watch可以监听vue中的任意data里的数据、方法、计算属性等

3.immediate属性默认值为false，当改为true时页面在初始化就会调用一次handler

4.watch默认不监测对象内部值的变化，需配置deep:true 才可以需要深度监视对象内部值

5.监视的两种写法：
a.new Vue时传入watch配置
b.通过vm.$watch监视

6.在没有配置immediate和deep属性的情况下有简写形式

现在举例子说明，监视msg，在发生变化后，输出新值和旧值：

一、第一种写法：

<body>
		<div id="app">
			{{msg}}
			<button @click="change" type="button">点击切换</button>
		</div>
		<script type="text/javascript">
			new Vue({
				data:{
					msg:"欢迎来到Vue页面"
				},
				methods:{
					change(){
						this.msg = "改变了"
					}
				},
				watch:{
					msg:{
						handler(newvalue,oldvalue){
							console.log(newvalue,oldvalue)
						}
					}
				}
			}).$mount("#app")
		</script>
	</body>

二、第二种写法：

<body>
		<div id="app">
			{{msg}}<!-- 插值表达式写法 -->
			<button @click="change" type="button">点击切换</button>
		</div>
		<script type="text/javascript">
			const vm=new Vue({
				data:{
					msg:"欢迎来到Vue页面"
				},
				methods:{
					change(){
						this.msg = "改变了"
					}
				}
			}).$mount("#app")
			vm.$watch('msg',{
				handler(newvalue,oldvalue){
					console.log(newvalue,oldvalue)
				}
			})
		</script>
	</body>

运行的界面以及点击后的输出：

三、配置immediate属性：

watch:{
	msg:{
		immediate:true,
		handler(newvalue,oldvalue){
			console.log(newvalue,oldvalue)
		}
	}
}

输出如下：

四、配置deep属性：

如下代码，点击按钮将msg对象里的list数组里的值改变：

未配饰deep属性：

<body>
		<div id="app">
			{{msg}}<br>
			<button @click="change" type="button">点击切换</button>
		</div>
		<script type="text/javascript">
			new Vue({
				data:{
					msg:{
						id:"001",
						type:"女装",
						list:[
							{
								id:"001001",
								type:"连衣裙"
							},
							{
								id:"001002",
								type:"羽绒服"
							},
							,
							{
								id:"001003",
								type:"毛衣"
							}
						]
					}
					//存放数据
				},
				methods:{
					change(){
						this.msg.list[0].type = "卫衣"
					}
				},
				watch:{
					msg:{
						handler(newvalue,oldvalue){
							console.log(newvalue,oldvalue)
						}
					}
				}
			}).$mount("#app")
		</script>
</body>

当点击按钮后msg值已发生变化，但是控制台未输出新值旧值，说明未监听到数据变化

在配置deep属性后：

watch:{
	msg:{
		deep:true,
		handler(newvalue,oldvalue){
			console.log(newvalue,oldvalue)
		}
	}
}

控制台有输出新值和旧值，监听到了数据变化

五、在没有配置immediate和deep属性的情况下可以进行简写：

watch:{
	msg(newvalue,oldvalue){
		console.log(newvalue,oldvalue)
	}
}

vm.$watch('msg',function(newvalue,oldvalue){
	console.log(newvalue,oldvalue)
})

Cherryup1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中watch数据监听用法笔记

1.当被监视的属性发生变化时，回调函数自动调用，进行相关操作2.监视的属性必须存在才能被监视，如果是不存在的不会报错，输出undefined，watch可以监听vue中的任意data里的数据、方法、计算属性等3.immediate属性默认值为false，当改为true时页面在初始化就会调用一次handler4.watch默认不监测对象内部值的变化，需配置deep:true 才可以需要深度监视对象内部值5.监视的两种写法： a.new Vue时传入watch配置 b.通过vm....
复制链接

扫一扫