我們一起聊聊 Vue2 使用 Watch 深度監(jiān)聽一個值
作者：前端老兵
在 Vue 2 中，如果你想深度監(jiān)聽一個對象或數(shù)組的屬性變化，你可以使用 deep 選項來實現(xiàn)。這通常用于當你的響應式數(shù)據(jù)是一個復雜的數(shù)據(jù)結(jié)構(gòu)（如對象或數(shù)組）時，并且你希望在這些數(shù)據(jù)結(jié)構(gòu)內(nèi)部發(fā)生變化時也能觸發(fā)監(jiān)聽器。
1. vue2 使用watch 深度監(jiān)聽一個值
在 Vue 2 中，如果你想深度監(jiān)聽一個對象或數(shù)組的屬性變化，你可以使用 deep 選項來實現(xiàn)。
這通常用于當你的響應式數(shù)據(jù)是一個復雜的數(shù)據(jù)結(jié)構(gòu)（如對象或數(shù)組）時，并且你希望在這些數(shù)據(jù)結(jié)構(gòu)內(nèi)部發(fā)生變化時也能觸發(fā)監(jiān)聽器。
下面是如何在 Vue 2 中設置一個深度監(jiān)聽的 watch 示例：
1.1. 基本用法
首先，你需要定義一個響應式的對象或數(shù)組，在 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, // 這里啟用深度監(jiān)聽
},
},
};1.2. 注意事項
- 性能影響：深度監(jiān)聽可能會導致性能問題，因為它會遞歸地監(jiān)聽所有嵌套的屬性。如果你知道只有某些特定的屬性會改變，考慮只監(jiān)聽那些特定的屬性。
- 數(shù)組變更檢測：Vue.js 通過對象屬性的變動來檢測變化，但對數(shù)組的變更檢測有一些限制。對于數(shù)組，只有使用變異方法（如 push, splice 等）才會被檢測到。如果直接修改索引或長度，需要手動調(diào)用 $set 或 $delete 方法。
1.3. 示例代碼
這里有一個完整的示例，展示了如何在 Vue 2 中使用深度監(jiān)聽：
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 的值，并且由于我們啟用了深度監(jiān)聽，所以 watch 的 handler 函數(shù)會被調(diào)用。
責任編輯：武曉燕
來源：
前端愛好者
