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:{
      handler(value){
        alert("我的name是："+value.name)
        alert("我的age是："+value.age)
      },
      deep:true
    }
  }
}
</script>