17370845950

JavaScript响应式编程核心是观察者模式，通过Proxy拦截get/set实现依赖收集与触发，或用Object.defineProperty兼容旧环境；其本质是Subject（响应式对象）与Observer（副作用函数）的自动关联。

JavaScript 中实现响应式编程，核心是让数据变化能自动触发相关逻辑（比如更新视图），而观察者模式正是支撑这一能力的经典设计模式之一。它不直接“监听”原始 JS 对象属性变化（ES5 无法拦截赋值），而是通过封装数据访问与修改过程，使依赖能被收集、变化时被通知。

用 Proxy 实现现代响应式（推荐）

ES6 的 Proxy 可以拦截对象的读取（get）和写入（set）操作，天然适合构建响应式系统：

• 在 get 中收集当前正在执行的副作用函数（如渲染函数）作为依赖；
• 在 set 中触发所有已收集的依赖重新执行；
• 支持嵌套对象、数组索引、新增/删除属性等场景（配合 Reflect）。

示例简版：

const effectStack = [];
function effect(fn) {
  const e = () => { fn(); };
  e();
  return e;
}

function reactive(obj) {
  const handler = {
    get(target, key, receiver) {
      track(target, key); // 收集依赖
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key); // 触发更新
      return result;
    }
  };
  return new Proxy(obj, handler);
}

// 简化依赖管理（实际需 WeakMap + Map 结构）
const depsMap = new WeakMap();
function track(target, key) {
  let deps = depsMap.get(target);
  if (!deps) {
    deps = new Map();
    depsMap.set(target, deps);
  }
  let dep = deps.get(key);
  if (!dep) {
    dep = new Set();
    deps.set(key, dep);
  }
  dep.add(activeEffect); // activeEffect 是当前正在执行的 effect 函数
}

function trigger(target, key) {
  const deps = depsMap.get(target)?.get(key);
  if (deps) deps.forEach(fn => fn());
}

用 Object.defineProperty 模拟（兼容旧环境）

ES5 仅支持对**已有属性**进行劫持，无法监听动态新增或删除，且对数组索引赋值、.length 修改等无效：

• 需遍历对象初始属性，为每个可枚举属性定义 get 和 set；
• get 中收集依赖（同 Proxy 方式）；
• set 中触发依赖更新；
• 数组需重写其原型方法（如 push、pop）来触发更新。

Vue 2 正是基于此实现，但局限明显，所以 Vue 3 切换到了 Proxy。

观察者模式的角色拆分：Subject 与 Observer

响应式本质是观察者模式的变体：

• Subject（被观察者）：即响应式对象，内部维护依赖列表（observers），提供 notify() 方法；
• Observer（观察者）：即副作用函数（effect），执行时把自己注册到对应属性的依赖中；
• 当数据变化 → Subject 调用 notify() → 所有 Observer 自动执行。

注意：这不是传统“主动订阅-发布”的手动调用模式，而是靠运行时依赖追踪（track）+ 响应式代理（Proxy）自动完成的隐式关联。

为什么不能直接监听普通对象？

JavaScript 普通对象没有变更通知机制：

• obj.a = 123 是静默赋值，JS 引擎不会广播事件；
• Object.observe 已废弃；
• watch 或 onchange 不适用于通用对象；
• 因此必须借助 Proxy / defineProperty 封装访问逻辑，把“赋值动作”变成可控的“响应式设置”。

不复杂但容易忽略：响应式不是魔法，它依赖你用 reactive 包裹数据、用 effect 包裹副作用，并确保依赖在响应式上下文中被读取。