Vue中监听（watch）的使用

1.属性的监听

普通的属性，直接在data中定义，然后监听即可。详见Vue基础。

2.对象属性的监听

对象中的属性，要想监听其中的某一属性值的变化，不能直接监听对象的变化。

  data() {
      return {
        user:{
          name:'',
          age:''
        }
      }
    },
  computed:{
      getName(){
        return this.user.name
      }
    },
  watch:{
      getName(newValue,oldValue){
         console.log(newValue)
      },
  }

上面监听对象中的name属性，只显示的关键代码。原理是利用计算属性computed做中间层来监听对象中某个属性的变化。除此之外，也可以直接用引号把属性包裹起来，从而不用计算属性：

 data() {
      return {
         user:{
              name:'',
              age:''
        }
    }
} 
watch:{
      'user.name'(newValue,oldValue){
        console.log(newValue)
      }
}        

这段代码和上面的代码效果是一样的。