1.屬性: 方法(最常用)

使用最廣泛的方式是將watch選項設定為一個物件，物件的屬性是要觀測的資料屬性，值是一個回撥函數，該回撥函數會在屬性變化時觸發。例如：

watch: {
  firstName: function(newVal, oldVal) {
    console.log('firstName changed:', newVal, oldVal);
  }
}

2.屬性: 陣列

你可以在一個watch選項中觀測多個資料屬性，這可以通過將要觀測的屬性放入一個陣列中來實現。例如：

watch: {
  'person.firstName': function(newVal, oldVal) {
    console.log('firstName changed:', newVal, oldVal);
  },
  'person.lastName': function(newVal, oldVal) {
    console.log('lastName changed:', newVal, oldVal);
  }
}

3.屬性: 物件

另一種觀測多個屬性的方式是使用物件。在這種情況下，物件的鍵是要觀測的屬性，值是一個包含處理常式、handler的物件。

該處理常式與屬性值的回撥函數相同，用於在屬性更改時執行元件中的邏輯。它還可以包含其他選項，例如deep和immediate。例如：

watch: {
  person: {
    handler: function(newVal, oldVal) {
      console.log('person changed:', newVal, oldVal);
    },
    deep: true
  }
}

4.屬性:字串

還可以使用字串指定要觀察的屬性，然後使用對應的方法名稱作為回撥函數。這個選項在只有一個屬性需要觀察的情況下非常有用。例如:

watch: {
  'person.firstName': 'firstNameChanged'
},
methods: {
  firstNameChanged: function(newVal, oldVal) {
    console.log('firstName changed:', newVal, oldVal);
  }
}

5.帶名稱空間的watch

watch選項中可以使用字串表示要觀測的屬性，可以使用.來存取物件中的屬性，如'person.firstName'，但是這樣會導致處理常式與屬性名稱緊密耦合，不便於維護。

為了解決這個問題，Vue提供了一種帶名稱空間的watch用法，這可以通過在watch選項中使用物件來實現。

物件的每個鍵都代表一個觀測的名稱空間，值是觀測該名稱空間下屬性的處理常式。例如：

watch: {
  person: {
    firstName: function(newVal, oldVal) {
      console.log('firstName changed:', newVal, oldVal);
    },
    lastName: function(newVal, oldVal) {
      console.log('lastName changed:', newVal, oldVal);
    }
  }
}

這裡，我們可以為person物件指定兩個名稱空間—firstName和lastName，這些名稱空間被視為person層次結構的子名稱空間。

6.$watch

除了在元件選項中設定watch屬性之外，Vue還允許你使用實體方法$watch來實現相同的效果。

與元件選項中設定的watch選項不同，呼叫$watch時可以在任何地方使用，例如在計算屬性、方法或任何其他實體方法中。例如：

created() {
  this.$watch('person.firstName', function(newVal, oldVal) {
    console.log('firstName changed:', newVal, oldVal);
  })
}

7.深度觀測

在預設情況下，watch只會觀測物件的第一層屬性的變化。這意味著在物件的巢狀層次結構中更改屬性時，不會觸發處理常式。要觀測物件的深層屬性，可以在watch選項中使用deep屬性，如下所示：

watch: {
  'person.name': {
    handler: function(newVal, oldVal) {
      console.log('name changed:', newVal, oldVal);
    },
    deep: true
  }
}

在這個例子中，我們觀察person物件的name屬性，使用deep: true選項在物件深層次結構中更改屬性時仍然能夠觸發處理常式。

綜上所述，Vue的watch選項提供了多種方法來觀測資料屬性的變化，讓我們能夠編寫更加優雅和維護性更高的程式碼。