vue开发技巧——watch使用

watch 使用

想必大家在vue开发中都或多或少的都会使用到watch来监听数据的变化，那我们就来聊一聊watch方法。

那我们大家都知道watch可以监听data中的数据变化：

watch:{
	value:function(newVal,oldVal){
		...do something
	}
}

methods:{
	valueChange(newVal,oldVal){
		...do something
	}
},
watch:{
	value:'valueChange'
}

如上两种方法都可以实现我们的监听需求，同样也是我们普遍的用法，但当我们所监听的vaule值变为一个object对象时，显然，上面的使用已经满足不了我们的需求了。

那我们可以直接修改需求吗，显然不能；如果能，我们也不能这么做；所以我们只能来修改我们的使用方法来满足需求。

deep

那假设我们有一个对象为**{id:‘1’,name:‘cb’}**，那我们要监听对象中id，和name的变化，并做一些处理。

data(){
	return {
		Object:{
			id:'1',
			name:'cb'
		}
	}
},
watch:{
	Object:{
		handler(newVal,oldVal){
			...do something
		},
		deep:true
	}
}

那这样就可以满足我们的需求了，这就是deep属性，deep属性会对目标深度监听。

那如果我们只想监听对象的 id或者name，那我们上面的写法是不是就有些浪费了呢。我们也可以单独对对象的某个属性来监听。

watch:{
	'Object.id':{
		handler(newVal,oldVal){
			...do something
		},
	},
	'Object.name':{
		handler(newVal,oldVal){
			...do something
		}
	}
}

immediate

在使用wacth 的监听中，组件初始化时，并不会执行wacth 中的handler方法，那么immediate属性就要登场了。

watch:{
	value:{
		handler(newVal,oldVal){
			...do something
		},
		immediate:true
	}
}

immediate 设为true时，组件初始化就会执行一次handler，灵活运用来满足需求。

提示

数组的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。