一、watch 核心作用

• 監測數據變化：當被監聽的數據發生改變時，自動執行指定的處理函數
• 處理副作用：適合執行異步操作（如接口請求）、復雜邏輯處理等 “副作用” 代碼

二、基礎語法（3 種寫法）

1. 簡單寫法（函數形式）
   適用于簡單邏輯，直接監聽數據變化：

   watch: {// 監聽data中的countcount(newVal, oldVal) {console.log(`count從${oldVal}變成了${newVal}`);}
   }
   

2. 完整配置寫法（對象形式）
   適用于需要深度監聽、立即執行等場景：

   watch: {user: {// 處理函數handler(newVal, oldVal) {console.log('用戶信息變了');},deep: true,      // 深度監聽（對象內部屬性變化）immediate: true  // 初始化時立即執行一次}
   }
   

3. 動態監聽（$watch 方法）
   適用于在方法或生命周期中動態添加監聽：

   mounted() {// 返回一個取消監聽的函數const unwatch = this.$watch('message', (newVal) => {console.log('message變了：', newVal);});// 需要時取消監聽// unwatch();
   }
   

三、監聽不同類型數據的注意事項

1. 基本類型（String/Number/Boolean）
   直接監聽即可，新舊值都能正確獲取：

   watch: {username(newVal, oldVal) {// 正確獲取新舊值}
   }
   

2. 對象（Object）

   • 默認只監聽對象引用變化，不監聽內部屬性變化
   • 需開啟?deep: true?才能監聽內部屬性變化
   • 優化：直接監聽對象的某個屬性（性能更好）

   watch: {// 直接監聽對象的屬性（推薦）'user.age'(newVal) {console.log('年齡變了：', newVal);}
   }
   

3. 數組（Array）

   • 監聽數組時，push/pop/splice?等方法會觸發監聽
   • 坑點：直接通過索引修改元素（如?this.arr[0] = 10）不會觸發監聽
   • 解決：用?splice?或重新賦值數組（this.arr = [...this.arr]）

四、與 computed 的核心區別

記憶口訣：
“computed 算結果，watch 做動作”
“復雜計算用 computed，異步操作找 watch”