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) } } 

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