Vue中watch的详细用法（三种）

最新推荐文章于 2025-07-04 16:05:28 发布

原创最新推荐文章于 2025-07-04 16:05:28 发布 · 1.8w 阅读

93 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

本文详细介绍了Vue中watch的三种使用方式：基本监听、带immediate选项的监听及深度监听。阐述了如何监听简单变量及对象的变化，并对比了watch与computed的区别。

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

在Vue中，用watch来响应数据的变化

 <input type="text" v-model="userName"/>

>第一种
//监听   当userName值发生变化时触发
watch: {
	userName (newName, oldName) {
		console.log(newName)
	}
}

第一种有一个缺点就是当值第一次绑定的时候不会执行监听函数，
只有当值改变的时候才会执行
如果我们想在第一次绑定的时候执行此监听函数则需要设置
immediate为true

第二种
watch: {
	userName: {
		handler (newName, oldName) {
			console.log(newName)
		},
		immediate: true
	}
}

当需要监听对象的改变时，此时就需要设置deep为true

第三种
<input type="text" v-model="cityName.name" />
data (){
	return {
		cityName: {name:'北京'}
	}
},
watch: {
	cityName: {
		handler(newName, oldName) {
			console.log(newName)
		},
		immediate: true,
		deep: true
	}
}

此时会给cityName的所有属性都加上监听函数，如果属性较多时可以使用如下

watch: {
	'cityName.name': {
		handler(newName, oldName) {
			console.log(newName)
		},
		immediate: true,
		deep: true
	}
}

注

数组的变化不需要深度监听
在watch中不要使用箭头函数，因为箭头函数中的this是指向当前作用域

watch computed 区别

computed 不能与 data 里重复必须有 return 是多个值引起一个值变化同步
watch 必须和 data 里一样没有 return 一个值引起多个值的变化异步