Vue使用 watch 監聽是一種強大的方式，可以監測到 Vue 實例中數據的變化，無論是組件數據，還是實例數據，都可以進行監聽。當數據發生變化時，就可以自動執行某些操作或者方法。Vue watch 監聽的核心就在于監測數據的變化，如果需要在某些數據變化后執行操作，則需使用 watch 監聽。下面我們詳細介紹 Vue watch 的使用。

要使用 watch 監聽，需要在 Vue 的實例中定義一個 watch 屬性，通過這個屬性來建立對要監聽數據的監控。當數據發生變化時，watch 中配置的處理函數就會被調用。下面看一個實例：

watch: {
name: function (val, oldVal) {
console.log("new: %s, old: %s", val, oldVal);
},
}

以上代碼中，我們為名稱屬性 name 定義了一個監控處理函數，當 name 發生變化時，我們將新值和舊值都輸出到控制臺中。

Vue watch 監聽常用的三種用法分別是：

### 1、基本用法

watch: {
// 監聽名稱
name: function(val, oldVal) {
console.log('new:', val, ' old:', oldVal);
}
}

上面這種方式是最基本的用法，只需要將需要監聽的數據以 key-value 對的形式放入 watch 中即可。當 name 屬性發生變化時，就會觸發監聽函數中對應的操作。

### 2、深度監聽

watch; {
// 監聽對象中的某個屬性
'myObject.someProperty': function(val, oldVal) {
console.log('new:', val, ' old:', oldVal);
}
}

有時候，我們需要監聽對象中的某個屬性，而不是整個對象。這種情況下，只需要使用對象.屬性的形式即可。在上面的例子中，我們監聽了 myObject 對象中的 someProperty 屬性的變化。

### 3、監聽數組

watch; {
// 監聽數組中元素的變化
'myArray.2': function(val, oldVal) {
console.log('new:', val, ' old:', oldVal);
}
}

在 Vue 中，數組中的元素變化是非常復雜的，因為數組是可變的。如果使用普通的方式監聽數組，是無效的。在 Vue 中，我們需要使用 $set 或者 $delete 手動操作數組中的元素，這樣才會觸發監聽器。當然，如果只是想監聽數組中某個元素的變化，也可以使用類似對象屬性訪問的形式。

通過上面介紹的三種方式，我們可以在使用 Vue 時，更加靈活地利用 watch 監聽數據的變化，實現更加高效的開發。