Vue实例方法 $watch

最新推荐文章于 2025-05-13 14:24:00 发布

初心鸿鹄

最新推荐文章于 2025-05-13 14:24:00 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue-51CTO 文章标签： Vue 监视数据

本文链接：https://blog.youkuaiyun.com/codesWay/article/details/79386912

Vue-51CTO 专栏收录该内容

21 篇文章

订阅专栏

Vue的$watch方法允许开发者监视数据变化并执行回调。当数据变动时，回调函数接收newValue和oldValue参数。通过option对象的deep属性可实现深度监视，尤其在处理对象数据时。该方法在监控基本数据和引用类型数据时略有不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可能会经常遇到这样的问题，怎么监视数据的变化，当数据发生变化的时候，要做一些事情该如何实现，其实不用担心，Vue有一个方法来解决这个问题：

vm.$watch(data,callback,[option]):监视数据的变化，当数据发生变化的时候，执行callback函数，这里的callback函数可以接受两个参数newValue和oldValue作为改变后（前）数据的值，还有option选项，其实就是一个对象{deep:true(false)}，用来决定是否深度监视（当监视数据对象的时候用到）。

当然监视的数据可以分为基本数据和引用类型的数据（对象数据），对于两者用法大体上一样，但是还是有些区别：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Vue-$watch</title>
	<style type="text/css" media="screen">
		[v-cloak]{
			display: none;
		}
	</style>
</head>
<body>
	<div id="container" v-cloak>
		<h3>{{user.name}}</h3>
		<h3>{{dog}}</h3>
		<button type="button" @click="alert1">弹出警告框</button>
		<button @click="changeGenerData">改变名字</button>
		<button type="button" @click="changeUserData">改变User</button>
		<input type="text" name="da" v-model = "user.age">
	</div>
	<script type="text/javascript" src="../dist/vue.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el:"#container",
			data:{
				user:{
					name:'张三',
					age:34,
				},
				dog:"金毛"
			},
			methods:{
				alert1:function(){
					alert(1)
				},
				changeGenerData:function(){
					this.dog = "哈士奇"
				},
				changeUserData:function(){
					this.user.age = 45
				}
			},
			watch:{
				//用法一，监视普通的数据
				//方式二，使用Vue实例中的watch选项：
				dog:function(newValue,oldValue){
					alert("dog数据发生了变化！");
					console.log(newValue);
					console.log(oldValue)
				},
				//用法二，监视对象数据
				//方式二，使用Vue实例中的watch选项：
				user:{
					//要做的事情handler选项
					handler:function(newValue,oldValue){
						console.log("数据对象user被改变了!")
					},
					// 是否深度监视
					deep:true
				}
			}
		})
		// vm.$watch(data,callback,[options]),
		// 用法一，监视普通的数据
		//方式一，使用Vue实例的$watch()方法：
		app.$watch("dog",function(newValue,oldValue){
			alert("dog数据发生了变化！");
			console.log(newValue);
			console.log(oldValue)
		})
		//用法二，监视对象数据
		//方式一，使用Vue实例的$watch()方法
		app.$watch("user",function(newValue,oldValue){
			console.log("数据对象user被改变了")
			console.log(newValue.age)//45
			console.log(oldValue.age)//45
			//数据对象user确实发生了改变，而在监视一般数据的时候newValue,oldValue分别代表的是改变后（前）的值
			//那么为什么这里得到的都是改变后的值呢？原因是虽然user发生了改变（属性变了），但是user是一个引用类型的值，newValue,oldValue都保存的是一个指针，指向user的引用，当user发生改变的时候指针的指向没有发生变化，所以此时newvalue和oldVaule的值是一样的
		},{deep:true})
	</script>
</body>
</html>