在 Vue.js 中，深度监听是指能够监测到对象内部属性变化的能力。默认情况下，Vue 通过数据劫持（data hijacking）来实现响应式系统，这包括了对对象属性的访问和修改进行拦截。但是，这种监听是浅层的，即它只会监听对象本身的属性变化，而不会递归地监听对象内部的属性变化。
深度监听的实现
Vue.js 提供了两种主要的方式来实现深度监听：
- 使用
watch的deep选项 - 使用
Object.defineProperty的递归实现
1. 使用 watch 的 deep 选项
在 Vue 组件中，你可以使用 watch 选项来监听数据的变化，并通过设置 deep 选项为 true 来启用深度监听。
export default {
data() {
return {
person: {
name: 'Alice',
age: 25
}
};
},
watch: {
// 监听 person 对象的变化
person: {
handler(newValue, oldValue) {
console.log('person changed:', newValue, oldValue);
},
deep: true
}
}
}在这个例子中，当 person 对象中的任何属性发生变化时，handler 函数都会被调用。这意味着如果你改变了 person.name 或 person.age，watcher 都会触发。
2. 使用 Object.defineProperty 的递归实现
Vue 内部使用 Object.defineProperty 方法来实现数据的响应式。你可以手动实现一个递归版本的 defineReactive 函数来深入对象内部，使其所有属性都变为响应式的。
function defineReactive(data, key, val) {
observe(val); // 递归观察内部属性
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
return val;
},
set: function reactiveSetter(newVal) {
if (newVal === val) return;
observe(newVal); // 递归观察新的值
val = newVal;
}
});
}
function observe(value) {
if (!value || typeof value !== 'object') {
return;
}
Object.keys(value).forEach(key => {
defineReactive(value, key, value[key]);
});
}深度监听的应用场景
深度监听在某些场景下非常有用，例如：
- 表单验证：在复杂表单中，深度监听可以让你实时检测表单数据的变化，并立即进行验证。
- 状态管理：在 Vuex 这样的状态管理库中，深度监听可以确保状态树中的任何变化都能被捕捉到，并触发相应的副作用。
- 数据同步：当你需要实时同步用户输入或者其他数据时，深度监听可以确保数据的一致性。
注意事项
虽然深度监听提供了强大的功能，但也有一些需要注意的地方：
- 性能开销：深度监听会增加一定的性能开销，尤其是当对象结构非常复杂时。因此，在不需要的情况下，尽量避免使用深度监听。
- 循环引用：如果对象中存在循环引用，递归实现的深度监听可能会导致无限递归。Vue 内部有机制来处理这种情况，但在手动实现时需要小心。
- 内存泄漏：如果一个对象不再被引用，但由于深度监听的存在，可能导致这个对象不能被垃圾回收器回收。