Vue2.0深度监听

Vue项目中对数据的监听，提供了一个很好的钩子watch，watch可以极其方便的监听我们常用数据类型值的变化，但通常当我们想监听一个对象中，某个属性值的变化时，很难达到我们预期的效果。那么如何实现对象属性的深度监听呢？
1、vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听。

直接监听对象–代码如下：

watch:{
	obj:{ //监听的对象
		deep:true, //深度监听设置为 true
		handler:function(newV,oldV){
			console.log('watch中：',newV)
		}
	}
}

监听对象下某个属性–代码如下：

data () {
	return {
	    obj: {
			name:'夜空中最亮的星星',
			age:18
	    }
	}
},
watch:{
	'obj.name': {
		deep:true,
		handler:function(newV,oldV){
			console.log('watch中：',newV)
		}
	}
}

2、利用computed配合watch实现单个属性的深度监听。

data() {
	return {
		obj:{
			name:'夜空中最亮的星星',
			age:18
		}
	}
},
computed: {
	name() {
		return this.obj.name;
	}
},
watch: {
	name(newV) {
		console.log('watch中name为：',newV)
	}
}