在Vue3中，使用watch監視reactive對象時，需根據監視的目標選擇合適的方法。以下是詳細的步驟和說明：
1.?監視整個reactive對象
-
自動深度監視：直接監視
reactive對象時，Vue3會默認啟用深度監視，無需設置deep: true。
javascript
復制
import { reactive, watch } from 'vue';const state = reactive({count: 0,user: { name: 'Alice' }
});// 監視整個state對象的變化
watch(state, (newState) => {console.log('State changed:', newState);
});// 修改內部屬性會觸發回調
state.user.name = 'Bob'; // 觸發
2.?監視基本類型屬性
-
使用Getter函數：對于基本類型（如
count），使用Getter函數確保正確追蹤。
javascript
復制
watch(() => state.count, (newCount, oldCount) => {console.log(`Count changed: ${oldCount} → ${newCount}`);
});state.count++; // 觸發，輸出: Count changed: 0 → 1
3.?監視對象類型屬性
-
需要深度監視：使用Getter函數返回對象屬性，并顯式設置
deep: true以檢測內部變化。
javascript
復制
watch(() => state.user,(newUser, oldUser) => {console.log('User changed:', newUser);},{ deep: true } // 啟用深度監視
);state.user.name = 'Charlie'; // 觸發
-
替換對象時觸發：即使未設置
deep: true，替換整個對象也會觸發。
javascript
復制
watch(() => state.user, (newUser) => {console.log('User replaced:', newUser);
});state.user = { name: 'David' }; // 觸發
4.?注意事項
-
舊值問題：深度監視時，
newValue和oldValue指向同一對象，需通過其他方式獲取舊值。 -
直接監視響應式屬性：避免直接監視屬性（如
watch(state.user, ...)），可能導致替換后失效。
總結
-
整個對象：直接監視，自動深度。
-
基本屬性：使用Getter，無需
deep。 -
對象屬性：使用Getter +?
deep: true檢測內部變化。
通過合理選擇監視方式，可以高效追蹤reactive對象及其嵌套屬性的變化。
