我們一起聊聊 Vue2 使用 Watch 深度監聽一個值
作者：前端老兵
在 Vue 2 中，如果你想深度監聽一個對象或數組的屬性變化，你可以使用 deep 選項來實現。這通常用于當你的響應式數據是一個復雜的數據結構（如對象或數組）時，并且你希望在這些數據結構內部發生變化時也能觸發監聽器。
1. vue2 使用watch 深度監聽一個值
在 Vue 2 中，如果你想深度監聽一個對象或數組的屬性變化，你可以使用 deep 選項來實現。
這通常用于當你的響應式數據是一個復雜的數據結構（如對象或數組）時，并且你希望在這些數據結構內部發生變化時也能觸發監聽器。
下面是如何在 Vue 2 中設置一個深度監聽的 watch 示例：
1.1. 基本用法
首先，你需要定義一個響應式的對象或數組，在 Vue 實例的 data 屬性中聲明它：
export default {
data() {
return {
myObject: {
innerValue: 0,
},
};
},
};然后，在 watch 對象中設置一個觀察器，指定 deep 為 true：
export default {
data() {
return {
myObject: {
innerValue: 0,
},
};
},
watch: {
myObject: {
handler(newValue, oldValue) {
console.log('myObject changed:', newValue, oldValue);
},
deep: true, // 這里啟用深度監聽
},
},
};1.2. 注意事項
- 性能影響：深度監聽可能會導致性能問題，因為它會遞歸地監聽所有嵌套的屬性。如果你知道只有某些特定的屬性會改變，考慮只監聽那些特定的屬性。
- 數組變更檢測：Vue.js 通過對象屬性的變動來檢測變化，但對數組的變更檢測有一些限制。對于數組，只有使用變異方法（如 push, splice 等）才會被檢測到。如果直接修改索引或長度，需要手動調用 $set 或 $delete 方法。
1.3. 示例代碼
這里有一個完整的示例，展示了如何在 Vue 2 中使用深度監聽：
new Vue({
el: '#app',
data: {
myObject: {
innerValue: 0,
},
},
watch: {
myObject: {
handler(newValue, oldValue) {
console.log('myObject changed:', newValue, oldValue);
},
deep: true,
},
},
});HTML:
<div id="app">
<button @click="myObject.innerValue += 1">Increment</button>
<p>Current value: {{ myObject.innerValue }}</p>
</div>在這個例子中，每次點擊按鈕都會更新 innerValue 的值，并且由于我們啟用了深度監聽，所以 watch 的 handler 函數會被調用。
責任編輯：武曉燕
來源：
前端愛好者
