---

前言

提示：這里可以添加本文要記錄的大概內容：

Vue 的 watch 選項用于觀察和響應 Vue 實例上的數據變化，可以知道最新數據是多少，以及以前數據是多少，也可以提高調試數據。當需要在數據變化時執行 異步操作 或 復雜邏輯 時，監聽器非常有用。

---

提示：以下是本篇文章正文內容，下面案例可供參考

watch: {visible () { // 監聽 visible 屬性的變化if (this.visible ) { // 當 visible 變為 true 時this.loadData(); // 觸發數據加載，（例如發起 API 請求、更新狀態等）}}
}

監聽器的作用：

1. 監聽 visible 屬性：當組件的 visible 屬性發生變化時（比如通過 show() 方法設置為 true 打開抽屜時），觸發回調函數。
2. 觸發數據加載：當 visible 變為 true 時（抽屜可見），調用 loadData() 方法加載部門權限樹的數據。

工作流程：

• 當用戶點擊打開抽屜時，visible 被設為 true。
• 監聽器檢測到 visible 的變化，執行 if (this.visible) 判斷。
• 條件滿足時調用 this.loadData()，向后端請求部門權限樹數據并渲染到界面上。

這個監聽器確保了每次打開抽屜時，都會重新加載最新的權限數據，而不是緩存舊數據。

基本用法

1. 簡單監聽

new Vue({data: {message: 'Hello'},watch: {// 監聽 message 的變化message(newVal, oldVal) {console.log(`新值: ${newVal}, 舊值: ${oldVal}`);}}
})

2. 對象形式配置

watch: {message: {handler(newVal, oldVal) {// 處理邏輯},immediate: true,  // 立即觸發一次deep: true        // 深度監聽}
}

---

使用場景

1. 執行異步操作

watch: {searchQuery(newVal) {// 輸入框搜索時，防抖請求接口clearTimeout(this.timer);this.timer = setTimeout(() => {this.fetchResults(newVal);}, 500);}
}

2. 監聽路由變化

watch: {'$route'(to, from) {// 路由變化時重新加載數據this.loadData(to.params.id);}
}

3. 復雜對象/數組變化

watch: {userInfo: {handler(newVal) {console.log('用戶信息發生深度變化');},deep: true}
}

---

關鍵配置項

配置項	類型	說明
handler	Function	監聽到變化時的回調函數
immediate	Boolean	是否在初始化時立即觸發一次回調（默認 false）
deep	Boolean	是否深度監聽對象/數組內部變化（默認 false）

與計算屬性的區別

	watch	computed
目的	監聽數據變化執行操作	基于依賴值計算新值
緩存	無緩存	有緩存（依賴不變不重新計算）
異步支持	支持	不支持
適用場景	數據變化時需要執行副作用（如請求接口）	模板中需要動態計算顯示值

---

最佳實踐

1. 優先使用計算屬性
   如果只是需要根據數據生成新值，優先使用 computed

2. 避免深度監聽的濫用
   深度監聽（deep: true）會遍歷對象所有屬性，對性能有影響

3. 及時取消監聽
   對于手動添加的監聽器（vm.$watch），在組件銷毀時要手動取消：

   created() {this.unwatch = this.$watch('data', handler);},beforeDestroy() {this.unwatch();}

4. 對象監聽優化
   如果只需要監聽對象的某個屬性，可以用字符串路徑：

   watch: {'obj.prop'(newVal) {// 監聽 obj.prop 的變化}}

---

動態添加監聽器

通過 vm.$watch 動態添加：

mounted() {const unwatch = this.$watch('dynamicData',(newVal) => {console.log('動態添加的監聽器');},{ deep: true });// 保存取消函數以便后續銷毀this.unwatchDynamic = unwatch;
}

---

注意事項

• 數組變更檢測
  Vue 無法檢測通過索引直接修改數組項（如 arr[0] = newVal），需使用 Vue.set 或 splice

• 對象屬性添加
  直接給對象添加新屬性不會被檢測到，需使用 Vue.set