vue观察对象的子属性变化，wacth的deep使用

代码如下：

    
<script>export default {  name: 'app',  data(){    return {      name:""    }  },  watch:{    // 观察的属性名    name(value){      alert("现在的name是："+value)    }  }}</script>

显示效果

那么我现在观察的不再是name这个属性，而是person对象里面的name呢？我们这个观察又应该怎么做呢？是不是我们将name改成person就可以了呢？

我们先来试试

    姓名：    年龄：
<script>export default {  name: 'app',  data(){    return {      // 由单个属性变成了一个对象      person:{        name:"",        age:""      }    }  },  watch:{    // 如果还是按照原来的思路，这里应该是换成person就可以了    // 观察的属性名    person(value){      alert("我的name是："+value.name)      alert("我的age是："+value.age)    }  }}</script>

答案显然是不行的，我两个属性都输入了，都没有触发消息弹出

好了，回到正题，关键在于watch里面，应该是这么写：

  watch:{    // 观察的属性名    person:{      handler(value){        alert("我的name是："+value.name)        alert("我的age是："+value.age)      },      deep:true    }  }

其中，deep:true是关键，在vue的文档中有说明：为了发现对象内部值的变化，可以在选项参数中指定deep: true。注意监听数组的变动不需要这么做。

另外一个关键是handler，根据参考的文章所说，watch 方法在编译的时候，用车协议会写成handler方法，反正我们当前这么写就对了。

我们现在再来看看效果如何：

输入了name：

输入age：

目前，无论是name还是age，只要是person下面的属性被修改了，都会被观察高考祝福语到。

完整代码：

    姓名：    年龄：
<script>export default {端午节习俗  name: 'app',  data(){    return {      // 由单个属性变成了一个对象      person:{        name:"",        age:""      }    }  },  watch:{    // 观察的属性名    person:{      ha睿达杯ndler(value){        alert(小豆芽的生长过程观察日记"我的name是："+value.name)        alert("我的age是："+value.age)      },      deep:true    }  }}</script>