Vue 响应式原理与实现：揭秘 Observer、Dep、Watcher 的秘密（上）

前端

2023-10-07 08:41:54

各位技术爱好者，欢迎来到本次的深度探索之旅，我们将共同揭开 Vue 响应式系统的奥秘。对于使用过 Vue 的开发者来说，双向数据绑定的神奇体验已司空见惯，但其背后的实现机制却鲜为人知。

浅尝即止：响应式系统的概览

在 Vue 的世界中，响应式系统扮演着至关重要的角色，它允许我们在修改数据时自动更新 UI。简而言之，Observer（观察者）、Dep（依赖）和 Watcher（观察者）是该系统中不可或缺的三驾马车。

Observer 负责监视数据的变化，当数据发生变动时，它会通知依赖于该数据的 Dep。Dep 维护着所有依赖于该数据的 Watcher，一旦收到 Observer 的通知，便会触发这些 Watcher 的更新动作。

剖析 Observer：数据变化的忠实哨兵

Observer 的职责非常明确，它监视着对象的属性值的变化，每当有属性值发生变动时，便会发出信号，通知相关方。

在 Vue 中，Observer 主要通过 Object.defineProperty 来实现。通过劫持对象的 setter 方法，它可以在属性值发生变化时自动触发回调函数。该回调函数将负责通知 Dep，数据发生了变动。

了解 Dep：依赖收集的枢纽

Dep（依赖）的作用是收集所有依赖于给定数据的 Watcher。当 Observer 发出数据变动通知时，Dep 会遍历其内部的 Watcher 列表，依次触发它们的更新动作。

在 Vue 中，Dep 的实现相对简单，它本质上是一个 Watcher 集合。当 Watcher 创建时，它会将自身添加到 Dep 中。当数据变动时，Dep 会通知其内部的所有 Watcher，触发它们的更新动作。

初探 Watcher：响应式更新的执行者

Watcher 是响应式系统中负责执行更新动作的组件。当一个 Watcher 被创建时，它会将自身与一个特定的数据属性关联起来。当该数据属性发生变动时，Watcher 便会接收到通知，并执行更新动作。

在 Vue 中，Watcher 的实现比较灵活，可以用来执行各种各样的更新动作，例如更新 DOM、重新渲染组件等。

示例源码：实战中的 Observer、Dep、Watcher

为了加深理解，我们提供了一个示例源码，展示了如何使用 Observer、Dep 和 Watcher 来实现一个简单的响应式系统。

class Observer {
  constructor(data) {
    this.data = data;
    this.dep = new Dep();
    this.observe(data);
  }

  observe(data) {
    if (Array.isArray(data)) {
      data.forEach(item => this.observe(item));
    } else if (typeof data === 'object') {
      Object.keys(data).forEach(key => {
        this.defineReactive(data, key, data[key]);
      });
    }
  }

  defineReactive(obj, key, value) {
    let dep = new Dep();
    Object.defineProperty(obj, key, {
      get() {
        dep.addSub(Dep.target);
        return value;
      },
      set(newValue) {
        if (newValue !== value) {
          value = newValue;
          dep.notify();
        }
      }
    });
  }
}

class Dep {
  constructor() {
    this.subs = [];
  }

  addSub(sub) {
    this.subs.push(sub);
  }

  notify() {
    this.subs.forEach(sub => sub.update());
  }
}

class Watcher {
  constructor(vm, expr, cb) {
    this.vm = vm;
    this.expr = expr;
    this.cb = cb;
    this.value = this.get();
  }

  get() {
    Dep.target = this;
    let value = this.vm.$data[this.expr];
    Dep.target = null;
    return value;
  }

  update() {
    let newValue = this.get();
    if (newValue !== this.value) {
      this.value = newValue;
      this.cb(newValue);
    }
  }
}