如何通过Mobx observe监听Observable嵌套对象内config的变化？

首先，咱们先理清你遇到问题的核心原因：

1. 初始时data是null，直接监听this.data?.config会因为引用不存在而失效；
2. 当GraphQL订阅返回新数据替换data时，之前绑定的监听是针对旧data.config的引用，自然无法捕获新对象的变化；
3. 如果config本身不是可观察对象（observable），哪怕父级data被标记为@observable，Mobx也无法跟踪它的内部变化。

下面给你几个可行的解决方案，按优先级排序：

方案一：用reaction动态绑定/解绑监听（推荐） #

利用Mobx的reaction监听data的变化，每次data更新时，自动重新绑定对新config的监听，同时清理旧的监听避免内存泄漏。

import { observable, observe, reaction } from "mobx";
import { persist } from "mobx-persist";

class YourPlayerStore {
  @persist("object") @observable public data: IPlayer | null = null;
  // 保存监听的销毁函数，用于后续清理
  private configObserverDisposer?: () => void;

  constructor() {
    // 监听data的变化，动态处理config的监听
    reaction(
      // 追踪data的变化
      () => this.data,
      (newData) => {
        // 先清理之前的监听
        if (this.configObserverDisposer) {
          this.configObserverDisposer();
          this.configObserverDisposer = undefined;
        }

        // 如果新data存在且有config，绑定新的监听
        if (newData?.config) {
          this.configObserverDisposer = observe(newData.config, (change) => {
            console.log("Config内部变化:", change);
          });
        }
      },
      // 初始化时立即执行一次，处理可能已存在的初始data
      { fireImmediately: true }
    );
  }

  // 处理GraphQL订阅的更新方法
  handleGraphQLUpdate(newPlayerData: IPlayer) {
    // 确保config是observable对象（如果后端返回的是普通对象，需要转换）
    this.data = {
      ...newPlayerData,
      config: observable(newPlayerData.config)
    };
  }
}

方案二：确保config是深层可观察对象 #

如果你的IPlayer接口对应的是普通JS对象，Mobx默认不会跟踪其内部字段的变化，需要把data标记为@observable.deep，或者手动把config包装成observable。

方式1：使用@observable.deep #

// 把data改为深层可观察
@persist("object") @observable.deep public data: IPlayer | null = null;

然后用deepObserve监听并过滤config路径的变化：

import { deepObserve } from "mobx-utils";

// 在构造函数或合适的时机调用
deepObserve(this.data, (change) => {
  // 只处理config及其子字段的变化
  if (change.path.startsWith("config.")) {
    console.log("Config变化:", change);
  }
});

方式2：手动包装config为observable #

当从GraphQL获取到数据时，不要直接赋值原始对象，而是把config转换成可观察对象：

handleGraphQLUpdate(newPlayerData: IPlayer) {
  this.data = {
    ...newPlayerData,
    // 把普通对象转为observable
    config: observable(newPlayerData.config)
  };
}

关键注意事项 #

• 不要在构造函数直接监听this.data?.config：因为初始时data是null，此时监听的是undefined，后续data赋值后不会自动绑定新的引用；
• 避免内存泄漏：每次替换监听时，一定要调用之前保存的销毁函数（disposer）；
• @persist兼容性：如果使用mobx-persist，确保@observable.deep和persist的组合正常工作，部分情况下可能需要自定义序列化逻辑。

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