如何使用RxJS监听对象多个属性的变更并获取变更信息？

我明白你想要实现的是监听嵌套对象的任意属性变更，同时获取变更的属性路径和新值。你之前的代码问题在于，只是创建了Observable但没有设置属性变更的拦截机制——普通JS对象的属性赋值不会自动触发Observable的通知，得用Proxy来拦截这些操作才行。

下面是一个完整的实现方案，我们用Proxy包裹状态对象，结合RxJS的Subject来发送变更通知：

// 导入RxJS的必要对象（浏览器环境需先引入RxJS库）
const { Subject } = rxjs;

function createObservableState(initialState) {
  // 创建Subject用于发送变更通知
  const changeSubject = new Subject();

  // 递归创建Proxy，处理嵌套对象的属性拦截
  const createProxy = (obj, path = []) => {
    return new Proxy(obj, {
      set(target, property, value) {
        // 先更新属性值
        target[property] = value;
        // 组装完整的属性路径，发送变更信息
        const fullPath = [...path, property];
        changeSubject.next({
          path: fullPath.join('.'), // 字符串形式的路径，也可保留数组方便后续处理
          newValue: value,
          fullPath: fullPath
        });
        // 如果新值是对象，给它也套上Proxy确保深层监听
        if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
          target[property] = createProxy(value, fullPath);
        }
        return true;
      },
      get(target, property) {
        const value = target[property];
        // 访问嵌套对象时，自动给非Proxy的对象套上Proxy
        if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Proxy)) {
          return createProxy(value, [...path, property]);
        }
        return value;
      }
    });
  };

  // 给初始状态套上Proxy
  const state = createProxy(initialState);

  // 返回状态对象和对应的Observable
  return {
    state,
    changes$: changeSubject.asObservable()
  };
}

// 使用示例
const { state, changes$ } = createObservableState({
  userActions: {
    window: {
      leftPanelWidth: 300,
      backgroundColor: 0xffffff,
    }
  }
});

// 订阅变更通知
changes$.subscribe(change => {
  console.log(`属性 ${change.path} 发生变更，新值：`, change.newValue);
});

// 测试属性变更
state.userActions.window.leftPanelWidth = 400;
// 控制台输出：属性 userActions.window.leftPanelWidth 发生变更，新值： 400

state.userActions.window.backgroundColor = 0x000000;
// 控制台输出：属性 userActions.window.backgroundColor 发生变更，新值： 0

// 新增嵌套属性也能被监听
state.userActions.window.height = 600;
// 控制台输出：属性 userActions.window.height 发生变更，新值： 600

关键说明： #

• Proxy拦截机制：通过Proxy的set方法捕获所有属性赋值操作，get方法确保访问嵌套对象时返回的也是Proxy，这样深层属性的变更也能被监听。
• Subject发送通知：Subject作为事件发射器，每次属性变更时发送包含路径和新值的对象，订阅者能清晰获取变更细节。
• 递归处理嵌套：不管对象层级有多深，递归创建Proxy都能覆盖到所有属性，实现全层级监听。

这个方案完全满足你的需求：任意属性变更时收到通知，并且明确知道哪个属性发生了变更、新值是什么。

内容的提问来源于stack exchange，提问作者Marek Krzeminski