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

這段代碼和上面的代碼效果是一樣的。