Vue响应式异常：错误更新多组件的对象/Proxy实例

核心原因 #

你遇到的问题不是响应式反模式，而是所有组件实例共享了同一个options数组及其内部对象的引用：

• 父组件传递的block.options是同一个数组对象，每个组件在onBeforeMount中直接将props.selectOptions赋值给state.options，导致所有组件的state.options指向内存中的同一数组。
• 当disableSelectedOptions通过disableOption修改选项属性时，实际上是在修改这个共享数组里的对象，因此所有组件都会同步看到变化。

修复方案 #

1. 为每个组件创建独立的options副本

在赋值state.options时，不要直接引用props的数组，而是创建新数组并浅拷贝内部对象，确保每个组件拥有独立的选项集合：

// 修改onBeforeMount中的赋值逻辑
if(props.selectOptions.length > 0) {
  state.options = props.selectOptions.map(opt => ({ ...opt }));
}

2. 同步处理动态更新的options（可选）

如果父组件的selectOptions可能动态变化，添加对应的监听器并同步创建独立副本：

watch(() => props.selectOptions, (newOptions) => {
  state.options = newOptions.map(opt => ({ ...opt }));
  // 同步更新已选中选项的禁用状态
  if (state.values.length > 0) disableSelectedOptions();
}, { deep: true })

3. 确保disableOption仅修改当前实例的选项

验证disableOption函数的实现，确保它只操作当前组件独立副本中的对象：

const disableOption = (option) => {
  option.disabled = true; // 此时修改的是当前组件专属的选项对象，不会影响其他实例
}

总结 #

这个问题的本质是引用类型的赋值副作用，只要让每个组件持有独立的options副本，就能彻底避免跨实例的状态污染。

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