先上代码：
<template>
<div class="hello">
<div>你好</div>
<input type="text" v-model="obj.name">
</div>
</template>
<script>
export default {
data(){
return{
obj:{
name:'zhanshan',
age:'18'
}
}
},
watch:{
obj(){
console.log(this.obj);
}
},
}
可以发现，当通过input双向绑定改变对象里面的数据时，打印台并没有打印任何东西，也就是说watch没有监听到对象的属性的变化。当给对象赋值时，watch才监听到对象的变化，如下：
methods:{
handle(){
this.obj={
name:'lisi',
age:'20'
}
}
},
结论：默认情况下 watch的handler方法只监听obj这个对象的引用的变化
但是这个不是我们的本意，我们确实需要监听obj.name的变化，此时deep就派上用场了。deep的意思就是深度观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，只要obj里面的属性有一个发生变化就会触发handler方法：
watch:{
obj:{
handler(){
console.log('this.obj');
},
//表示声明了obj后，会立即去执行handler方法
immediate:true
deep:true
},
handler方法，这个是最原始的写法，给obj绑定了一个handler方法，之前我们写的 watch方法其实默认写的就是这个handler方法。但是添加deep，这样性能开销就会变大，任何修改obj里面的任何属性都会触发这个监听器。
所以可以采用原始的写法，字符串的形式来监听：
watch:{
'obj.name'(){
console.log(this.obj);
}
},
顺便说一下，immediate属性和deep属性都必须是写原始的写法 ，利用handler方法才会生效.
