如何让依赖全等校验的类库兼容Proxy类前端框架？

你的问题核心在于：Vue 3这类框架用Proxy包装对象后，代理对象和原对象的严格全等===判断会返回false，导致原类库的查找逻辑失效。下面是几个不依赖框架专属工具的通用解决方案：

方案1：给Item实例添加唯一标识（推荐） #

给每个Item实例分配一个全局唯一的标识，用这个标识替代全等校验，是最稳妥的方案——不管对象被Proxy包裹多少次，标识都不会变。

修改Item类，在构造函数中生成唯一ID：

class Item {
  constructor(name) {
    this.name = name;
    this.active = false;
    // 用Symbol生成唯一标识，避免和用户自定义属性冲突
    this._itemId = Symbol('unique-item-id');
    // 如果需要序列化，也可以用UUID或者自增数字：
    // this._itemId = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
  }
}

然后修改Stage的activate方法，通过_itemId匹配实例：

class Stage {
  constructor() {
    this.items = [];
  }

  addItem(item) {
    this.items.push(item);
  }

  activate(targetItem) {
    const targetId = targetItem._itemId;
    const foundItem = this.items.find(item => item._itemId === targetId);

    if (!foundItem) {
      throw new Error('Item未找到');
    }

    // 激活目标Item，同时关闭其他Item的激活状态
    this.items.forEach(item => {
      item.active = item._itemId === targetId;
    });
  }
}

这个方案完全不依赖任何框架特性，不管是Vue的Proxy还是自定义Proxy，都能正常工作，逻辑简单且性能稳定。

方案2：实现自动穿透Proxy的全等判断工具 #

如果不想给Item添加额外属性，可以写一个工具函数，自动获取Proxy背后的原对象再做全等判断。不过这个方案需要兼容常见框架的Proxy实现（比如Vue的__v_raw__属性），通用性略逊于方案1。

先实现工具函数：

function isSameInstance(a, b) {
  // 先处理直接全等的情况
  if (a === b) return true;

  // 递归获取原对象的辅助函数
  const getRaw = (obj) => {
    // 处理Vue 3的Proxy：__v_raw__指向原对象
    while (obj && typeof obj === 'object' && obj.__v_raw__) {
      obj = obj.__v_raw__;
    }
    // 可以扩展处理其他框架的Proxy实现，比如React的相关包装对象
    return obj;
  };

  return getRaw(a) === getRaw(b);
}

然后修改Stage的activate方法：

class Stage {
  constructor() {
    this.items = [];
  }

  addItem(item) {
    this.items.push(item);
  }

  activate(targetItem) {
    const foundItem = this.items.find(item => isSameInstance(item, targetItem));

    if (!foundItem) {
      throw new Error('Item未找到');
    }

    this.items.forEach(item => {
      item.active = isSameInstance(item, targetItem);
    });
  }
}

注意：这个方案的局限性在于，如果是完全自定义的Proxy（没有暴露原对象的属性），则无法穿透，此时方案1依然是最优解。

方案3：通过WeakMap管理实例映射（需用户配合） #

如果类库可以控制Item实例的创建流程，可以用WeakMap存储代理对象和原对象的映射，但这个方案需要用户通过类库的方法创建/添加实例，实用性较低：

class Stage {
  constructor() {
    this.items = [];
    this.proxyToRaw = new WeakMap();
  }

  addItem(item) {
    // 如果传入的是Proxy对象，尝试获取原对象并存储映射
    if (item.__v_raw__) {
      this.proxyToRaw.set(item, item.__v_raw__);
      this.items.push(item.__v_raw__);
    } else {
      this.items.push(item);
    }
  }

  activate(targetItem) {
    // 先尝试直接匹配，再尝试从映射中找原对象
    let foundItem = this.items.find(item => item === targetItem);
    if (!foundItem) {
      foundItem = this.items.find(item => item === this.proxyToRaw.get(targetItem));
    }

    if (!foundItem) {
      throw new Error('Item未找到');
    }

    this.items.forEach(item => {
      item.active = item === foundItem;
    });
  }
}

这个方案需要用户严格遵守类库的实例添加流程，否则会失效，因此不推荐作为首选。

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