watch（組件選項）

watch 是Vue組件的一個選項，它允許你定義一些監聽器，這些監聽器會在組件的響應式數據變化時調用。它主要用于組件內部的數據監聽。

實際場景：

??? 當組件內部的數據變化時，需要執行一些操作，比如發送請求、更新其他數據、執行動畫等。
??? 監聽組件的props變化，并在變化時執行一些操作。

用法示例：

javascript

export default { ?
? data() { ?
??? return { ?
????? query: '' ?
??? }; ?
? }, ?
? watch: { ?
??? // 監聽query的變化 ?
??? query(newVal, oldVal) { ?
????? // 當query變化時執行的邏輯 ?
????? console.log(`Query changed from ${oldVal} to ${newVal}`); ?
??? } ?
? } ?

}

$watch（實例方法）

$watch 是Vue實例的一個方法，它允許你在Vue實例的任意時刻動態地添加監聽器。它不限于組件的創建階段，可以在組件的任何生命周期內使用。

實際場景：

??? 在組件的某個特定生命周期鉤子（如mounted）中，根據條件添加監聽器。
??? 在Vue實例已經創建后，需要監聽某個尚未在組件的data或computed中定義的數據。
??? 在某些異步操作完成后，需要監聽新獲取的數據。

用法示例：

javascript

export default { ?
? data() { ?
??? return { ?
????? someData: '' ?
??? }; ?
? }, ?
? mounted() { ?
??? // 組件掛載后，監聽someData的變化 ?
??? this.$watch('someData', (newVal, oldVal) => { ?
????? console.log(`SomeData changed from ${oldVal} to ${newVal}`); ?
??? }); ?
? } ?

}

區別

??? 定義位置：watch 是Vue組件的一個選項，定義在組件的選項對象中；而 $watch 是Vue實例的一個方法，可以在組件的任何地方（包括生命周期鉤子、方法中）調用。

??? 使用時機：watch 定義的監聽器在組件實例化時就會生效；而 $watch 可以在組件的任何生命周期內調用，更加靈活。

??? 作用域：watch 主要用于組件內部的數據監聽；而 $watch 可以在Vue實例的任何地方監聽數據變化，包括全局Vue實例（如果有的話）。

??? 返回值：$watch 方法調用后會返回一個停止監聽該屬性的函數，可以用于手動停止監聽；而 watch 選項定義的監聽器則沒有直接的停止監聽的方法（除非通過條件渲染或銷毀組件來間接實現）。

在實際開發中，選擇使用 watch 還是 $watch 取決于你的具體需求和場景。如果你需要在組件內部監聽數據變化，并且這些監聽器在組件創建時就需要生效，那么使用 watch 選項會更方便。如果你需要在組件的某個特定時機動態地添加監聽器，或者需要在Vue實例的任意地方監聽數據變化，那么 $watch 方法會是更好的選擇。