watch监听一个对象中的属性 - Vue篇

vue中提供了watch方法，可以监听data内的某些数据的变动，触发相应的方法。
1.监听一个对象

<script>
	
	export default {
		data() {
		    return {
		    	obj: {
					name: '',
					code: '',
					timePicker:[]
				}
		    }
		},
		watch: {
			obj: {
				handler(newVal, oldVal) {
					//todo
				},
				immediate: true,
		     	deep: true // 可以深度检测到 person 对象的属性值的变化
			}
		}
}

<script>

immediate如果为true 代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法。默认为false
deep设置为true，这样，如果修改了search内任何一个属性，都会执行handler这个方法。 有一个缺点是 会影响性能，尤其是对象内结构嵌套过深。
如果只是想监听对象内的某个属性，比如name，则可以选择如下操作方法。
2.监听对象内的某个属性

<script>
	
	export default {
		data() {
		    return {
		    	obj: {
					name: '',
					code: '',
					timePicker:[]
				}
		    }
		},
		watch: {
			'obj.name': {
				handler(newVal, oldVal) {
					
				}
				
			}
		}
}

<script>