Vue 官網解釋：

Vue 提供了一種更通用的方式來觀察和響應 Vue 例項上的資料變動：偵聽屬性。當你有一些資料需要隨著其它資料變動而變動時，你很容易濫用 watch——特別是如果你之前使用過 AngularJS。然而，通常更好的做法是使用計算屬性而不是命令式的 watch 回撥。

watch 監聽資料分為兩種情況：

第一種：基本型別資料監聽

比如：字串，整數，Boolean，型別的資料

第二種：引用型別資料監聽

比如：物件，和陣列

基本型別資料監聽例項

HTML

<div id="demo">{{ fullName }}</div>
 

JS

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})
 

引用型別資料監聽

  props: {
    secdown: {
      type: Object,
      default: () => ({})
    }
  },
   watch: {
    secdown: {
      handler(val) {
        this.changeChoose(val);
      },
      deep: true,
      immediate: true
    }
  }

這裡注意，因為是物件或者資料時候，vue不能進行到深層拷貝，所以需要加上 deep: true,如果還需要資料立即進行監聽，則需要在加上 immediate: true。