watch 偵聽屬性

watch 可以讓我們監聽 data 物件屬性或計算屬性的變化，每當監聽的對象的值產生變化時，實行watch裡面的程式碼。我們可以用watch來做跟computed計算屬性一樣的事情：

<div id="app">
  <h3>請告訴我您的郵寄地址</h3>
  地區 <input v-model="region"></input> 城鎮 <input v-model="city"></input>
  目前郵寄地址：{{ fullLocation }}
</div>

// watch 監聽屬性版
var vm = new Vue({
  el: '#app',
  data: {
    region: '',
    city: '',
    fullLocation: '',
  },
  watch: {
    region(val, oldVal) {
      this.fullLocation = val + ' ' + this.city
    },
    city(val, oldVal) {
      this.fullLocation = this.region + ' ' + val
    }
  }
})

但顯然如果直接使用computed會更加容易閱讀，watch是強大的屬性，而且有更大的自定義空間，但在這個簡易範例中顯然是殺雞用牛刀。

// computed 計算屬性版
var vm = new Vue({
  el: '#app',
  data: {
    region: '',
    city: ''
  },
  computed: {
    fullLocation() {
      return this.region + ' ' + this.city
    },
  }
})

watch較能比computed做到更多的功能，是合用在非同步操作。比如偵聽變化後，延遲一段時間再更新屬性的值，監看 data 物件內的物件屬性、取得舊資料以及深度監看。