一、什么是深度監(jiān)聽？

在 Vue 中，深度監(jiān)聽是指監(jiān)聽一個對象或數組的嵌套屬性（深層結構）的變化，而不僅僅是監(jiān)聽頂層屬性的引用變化。Vue 的響應式系統(tǒng)默認只監(jiān)聽對象的淺層屬性（即直接屬性），如果需要監(jiān)聽對象內部的嵌套屬性變化，就需要啟用 深度監(jiān)聽。

二、實現深度監(jiān)聽的方法

Vue 提供了 watch 選項（或 @watch 裝飾器）來監(jiān)聽數據變化，通過設置 deep: true 可以實現深度監(jiān)聽。以下是具體實現方式：

1. 使用 watch 選項

語法：

watch: {
  // 監(jiān)聽的對象
  obj: {
    handler(newVal, oldVal) {
      console.log('obj 變化了:', newVal, oldVal);
    },
    deep: true // 開啟深度監(jiān)聽
  }
}

完整示例：

new Vue({
  el: '#app',
  data() {
    return {
      obj: {
        a: 1,
        b: {
          c: 2
        }
      }
    };
  },
  watch: {
    obj: {
      handler(newVal, oldVal) {
        console.log('obj 更新:', newVal);
      },
      deep: true
    }
  },
  methods: {
    changeObj() {
      this.obj.b.c = 3; // 修改深層屬性
    }
  }
});

• • 效果：當 obj.b.c 變?yōu)?3 時，watch 的 handler 會被觸發(fā)，輸出新值。

• 說明：

  • deep: true 會遞歸遍歷 obj 的所有嵌套屬性，確保任何深層變化都能觸發(fā)監(jiān)聽。
  • handler 接收新值和舊值，但由于深層對象是引用類型，newVal 和 oldVal 可能是同一個對象（僅內容不同）。

2. 使用 $watch 方法

• 語法：

this.$watch('obj', (newVal, oldVal) => {
  console.log('obj 變化:', newVal);
}, {
  deep: true
});

• 完整示例：

new Vue({
  el: '#app',
  data() {
    return {
      obj: {
        a: 1,
        b: { c: 2 }
      }
    };
  },
  mounted() {
    this.$watch('obj', (newVal, oldVal) => {
      console.log('obj 更新:', newVal);
    }, {
      deep: true
    });
  },
  methods: {
    changeObj() {
      this.obj.b.c = 3;
    }
  }
});

• 效果：與 watch 選項相同，監(jiān)聽深層變化。

3. 監(jiān)聽特定嵌套屬性（避免深度監(jiān)聽）

• 原理：如果只關心某個深層屬性，可以直接監(jiān)聽其路徑，無需 deep。
• 代碼：

watch: {
  'obj.b.c'(newVal, oldVal) {
    console.log('obj.b.c 變化:', newVal, oldVal);
  }
}

• 效果：僅當 obj.b.c 變化時觸發(fā)，不監(jiān)聽其他屬性。
• 優(yōu)點：性能更高，避免不必要的遞歸監(jiān)聽。

三、深度監(jiān)聽的工作原理

• Vue 的響應式系統(tǒng)基于 Object.defineProperty（Vue 2）或 Proxy（Vue 3）。
• 默認情況下，只有對象頂層屬性被設置為響應式，嵌套屬性的 setter/getter 需通過 deep: true 遞歸綁定。
• 當 deep: true 啟用時，Vue 會遍歷對象的所有屬性，添加監(jiān)聽器，確保深層變化可被檢測。

四、注意事項

• 性能開銷：
  • deep: true 會遞歸監(jiān)聽所有嵌套屬性，對象越大，性能開銷越高。
  • 優(yōu)化建議：盡量監(jiān)聽具體屬性（如 'obj.b.c'），或拆分數據結構。
• 新舊值問題：
  • 深度監(jiān)聽時，newVal 和 oldVal 是同一個引用，需深拷貝比較差異：

handler(newVal) {
  const oldVal = JSON.parse(JSON.stringify(newVal));
  // 比較邏輯
}

數組特殊情況：

• 數組的嵌套對象也支持深度監(jiān)聽，但數組本身的push等方法已默認響應式，無需 deep。
• 示例：

watch: {
  'arr[0].a': {
    handler(newVal) {
      console.log('arr[0].a 變化:', newVal);
    },
    deep: true
  }
}

• Vue 3 差異：
  • Vue 3 使用 Proxy，深度監(jiān)聽更高效，但用法一致。

五、實際應用場景

• 表單數據：監(jiān)聽復雜表單對象的變化，實時校驗。

watch: {
  form: {
    handler(newVal) {
      this.validateForm(newVal);
    },
    deep: true
  }
}

• 狀態(tài)管理：監(jiān)聽嵌套狀態(tài)（如 Vuex 的 state），觸發(fā)更新。
• 動態(tài)配置：監(jiān)聽配置對象的變化，調整 UI。

六、面試擴展

如果面試官追問，我可以補充：

替代方案：用 computed 計算屬性配合 watch

computed: {
  objComputed() {
    return JSON.stringify(this.obj); // 轉為字符串比較
  }
},
watch: {
  objComputed(newVal, oldVal) {
    console.log('obj 變化:', newVal);
  }
}

性能優(yōu)化：結合 immediate: true（初始觸發(fā)）或防抖（debounce）：

watch: {
  obj: {
    handler: _.debounce(function(newVal) {
      console.log('節(jié)流更新:', newVal);
    }, 300),
    deep: true
  }
}

七、總結

• 核心方法：watch 或 $watch 設置 deep: true。
• 推薦實踐：優(yōu)先監(jiān)聽具體屬性，必要時用深度監(jiān)聽并優(yōu)化性能。
• 代碼示例已覆蓋常見場景，面試中可根據需求調整。

到此這篇關于在Vue中實現深度監(jiān)聽的示例代碼的文章就介紹到這了,更多相關Vue深度監(jiān)聽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論