Vue.js中的深度监听：理解其工作原理及应用

精选原创

牛掰666 2024-09-25 15:44:33 ©著作权

©著作权归作者所有：来自51CTO博客作者牛掰666的原创作品，请联系作者获取转载授权，否则将追究法律责任

在 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]);
  });
}