上手构建 Vue.js 中的 Observer 模式

前端

2023-09-27 21:50:12

深入浅出 Observer 模式：Vue.js 中数据响应式的关键

Observer 模式简述

Observer 模式是一种设计模式，它允许对象在不知道依赖它的其他对象的情况下通知这些依赖对象。在 Vue.js 中，Observer 模式是实现数据响应式机制的关键组成部分。它可以跟踪数据的变化并自动更新相关的用户界面元素。

从零开始构建 Observer

构建一个 Observer 从头开始需要以下步骤：

建立依赖项集合： 创建一个数组或集合来存储依赖该对象的组件或函数。
监听数据变化： 使用 JavaScript 的 Object.defineProperty() 方法监听数据变化。
更新依赖项： 数据变化时，调用依赖项的更新方法，从而导致相关组件或函数重新渲染或执行。

利用 Proxy 简化 Observer

ES6 引入了 Proxy 对象，它可以通过拦截和修改对对象的访问来简化 Observer 的构建：

const observer = new Proxy(data, {
  get(target, property) {
    // 添加依赖项
    track(target, property);

    // 返回属性值
    return target[property];
  },
  set(target, property, value) {
    // 更新属性值
    target[property] = value;

    // 通知依赖项
    notify(target, property);

    // 返回 true 表示设置成功
    return true;
  }
});

将 Observer 转换为 JavaScript 对象

下面是一个直接可用于 JavaScript 的 Observer 对象实现：

const Observer = function(data) {
  // 依赖项集合
  this.deps = new Set();

  // 使用 Proxy 创建响应式对象
  this.data = new Proxy(data, {
    get(target, property) {
      // 添加依赖项
      track(target, property);

      // 返回属性值
      return target[property];
    },
    set(target, property, value) {
      // 更新属性值
      target[property] = value;

      // 通知依赖项
      notify(target, property);

      // 返回 true 表示设置成功
      return true;
    }
  });
};

// 添加依赖项
function track(target, property) {
  this.deps.add(target);
}

// 通知依赖项
function notify(target, property) {
  this.deps.forEach(dep => dep.update());
}