在Vue.js中，watch和observe是两个核心概念，它们使得Vue能够实现响应式数据绑定。理解这两个概念对于提升前端开发效率至关重要。本文将深入探讨Vue.js中的watch和observe，帮助开发者掌握数据变化的奥秘。

一、Vue.js中的响应式原理

Vue.js使用Object.defineProperty方法来实现数据的响应式。当数据发生变化时，Vue会自动更新视图，这是通过watch和observe实现的。

1.1 Observe

observe函数用于监听一个对象的变化。当对象被创建时，Vue会使用defineProperty为每个属性添加getter和setter。当属性值发生变化时，getter和setter会被触发，从而实现数据变化的监听。

function observe(value) {
  if (!value || typeof value !== 'object') {
    return;
  }
  Object.keys(value).forEach((key) => {
    defineReactive(value, key, value[key]);
  });
}

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: () => {
      // 添加依赖
      depend();
      return val;
    },
    set: (newVal) => {
      if (val !== newVal) {
        val = newVal;
        // 触发更新
        notify();
      }
    },
  });
}

1.2 Depend

depend函数用于收集依赖。当一个属性被读取时，depend会被调用，并将当前的watcher添加到依赖列表中。

let dep = new Dep();

class Watcher {
  constructor(vm, expOrFn, cb) {
    this.vm = vm;
    this.expOrFn = expOrFn;
    this.cb = cb;
    this.value = this.get();
  }
  get() {
    Dep.target = this;
    let value = this.expOrFn.call(this.vm);
    Dep.target = null;
    return value;
  }
  update() {
    this.run();
  }
  run() {
    const newValue = this.get();
    if (newValue !== this.value) {
      this.value = newValue;
      this.cb(newValue);
    }
  }
}

function depend() {
  if (Dep.target) {
    dep.addDep(Dep.target);
  }
}

1.3 Notify

notify函数用于通知所有依赖项更新。当数据发生变化时，notify会被调用，它会遍历依赖列表，并调用每个依赖项的update方法。

function notify() {
  const subs = dep.subs.slice();
  for (let i = 0; i < subs.length; i++) {
    subs[i].update();
  }
}

二、Vue.js中的Watch

watch是Vue.js提供的一个用于观察和响应Vue实例上的数据变化的函数。它接受一个表达式或函数，以及一个回调函数，当表达式或函数的值发生变化时，回调函数会被执行。

2.1 使用方法

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  watch: {
    message: function(newValue, oldValue) {
      console.log(`Old value: ${oldValue}, New value: ${newValue}`);
    }
  }
});

在上面的例子中，当message数据发生变化时，watch回调函数会被执行，并打印出旧值和新值。

2.2 深度监听

有时候，我们可能需要监听一个对象内部属性的变化。watch函数提供了deep选项来实现深度监听。

new Vue({
  el: '#app',
  data: {
    user: {
      name: 'John'
    }
  },
  watch: {
    user: {
      handler: function(newValue, oldValue) {
        console.log('user object changed');
      },
      deep: true
    }
  }
});

在上面的例子中，当user对象内部属性发生变化时，watch回调函数会被执行。

三、总结

通过本文的介绍，相信你已经对Vue.js中的watch和observe有了更深入的了解。掌握这两个概念，可以帮助你更好地理解Vue.js的响应式原理，从而提升前端开发效率。在实际开发中，合理使用watch和observe，可以使你的Vue.js应用更加高效和健壮。