vue观察对象的子属性变化，wacth的deep使用-百家乐凯发k8

代码如下：

显示效果

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

我们先来试试

姓名：年龄：

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

好了，回到正题，关键在于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下面的属性被修改了，都会被观察到。

完整代码：

姓名：年龄：