【Vue中watch的使用】

Syugam

已于 2023-02-04 10:28:08 修改

阅读量325

点赞数 1

分类专栏： Vue_base 文章标签： vue.js javascript typescript

于 2022-09-21 17:15:38 首次发布

本文链接：https://blog.csdn.net/m0_54838595/article/details/126975838

版权

Vue_base 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

watch

watch的作用
watch监测数据
- watch监测简单数据
- watch监测多级数据
总结

watch的作用

在Vue中，我们可以通过watch配置项来监测数据的变化，以便处理一些业务。

watch监测数据

在watch看来，数据可以分为简单数据与多级的数据(对象)
简单数据：例如 msg: ‘hello’
多级的数据: 例如 number: { a:0, b:1}

watch监测简单数据

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>watch的使用</title>
		<script type="text/javascript" src="./vue.js"></script>
	</head>
	<body>
	    <div id="root">
	      <h2>I am {{ isOK ? "fine" : "not fine"}} !</h2>
	      <button @click="changeOK">changeOK</button>
	    </div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
		        isOK: true,
		        person: {
		          name: 'mmm',
		          age: 18
		        }
			},
	     	methods: {
	        	changeOK() {
	          		this.isOK = !this.isOK
	        	}
	      	},
	      	watch: {
	        	// 监测isOK的变化
	        	isOK(newValue,oldValue) {
	          		console.log("isOK变了","oldValue=",oldValue," newValue=",newValue);
	        	}
	      	}
		})
	</script>
</html>

效果：
在这里插入图片描述

watch监测多级数据

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>watch的使用</title>
		<script type="text/javascript" src="./vue.js"></script>
	</head>
	<body>
	    <div id="root">
	      <h2>我的名字是{{person.name}}</h2>
	      <h2>我今年{{person.age}}岁</h2>
	      <button @click="changeName">changeName</button>
	      <button @click="beOlder">beOlder</button>
	    </div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
		        person: {
		          name: 'mmm',
		          age: 18
		        }
			},
	      	methods: {
	        	changeName() {
	          		this.person.name = 'nnn'
	        	},
	        	beOlder() {
	          		this.person.age ++
	        	}
	      	},
      		watch: {
		      /*
		        //这样监视的是numbers的地址，虽然numbers里面属性改变，但是numbers地址未改变，监测不到变化
		        person() {
		          console.log("person变化了");
		        }
		      */
		        person: {
		          //immediate: true,  //初始化时执行以下 handler()
		          deep: true,         //配置 deep 可以监视到 numbers 内部改变
		          handler() {
		            console.log("person变化了");
		          }
		        }
		    }
		})
	</script>
</html>

效果：
在这里插入图片描述

总结

watch配置项的完整写法：

被监测数据: {
     immediate: true,    //初始化时执行以下 handler()
     deep: true,         //配置 deep 可以监视到数据内部改变
     handler() {         //数据变化时执行
        console.log("变化了");
     }
}

当监测的配置只有handler时可以简写：

被监测数据() {
	console.log("变化了");
}

Syugam

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue中watch的使用】

Vue中watch的使用
复制链接

扫一扫

专栏目录