vue之watch（watch的高级用法）

watch主要是监听data或props中的值的变化，但是如果这个值是一个对象，对象内的某个属性发生了改变，有可能会监听不到变化，此时的解决办法是:将代码一改写为代码二

代码一：(普通写法)

watch: {
		obj(newValue, oldValue) {
			//do something
			console.log(newValue,oldValue)
		}
	}

代码二：（高级用法）

watch: {
		obj:{
			handler(newValue, oldValue) {
				//do something
				console.log(newValue,oldValue)
			},
			deep:true
		}
	},

deep:true是开启深层次的监听，即所有属性都加上监听器，如果其中一个发生改变了就执行handler函数。

 

有时候需要程序一执行就监听数据的变化，此时需要加上  immediate: true  ，即首次加载就监听数据变化（默认是不开启的，默认只有发生改变才监听）：

watch: {
		obj:{
			handler(newValue, oldValue) {
				//do something
				console.log(newValue,oldValue)
			},
			deep:true,
			immediate: true
		}
	}

有时候只需监听对象的某个属性时可以采用如下代码：

watch: {
		"obj.acount":{
			handler(newValue, oldValue) {
				//do something
				console.log(newValue,oldValue)
			},
			deep:true,
			immediate: true
		}
	}