Vue3响应式对象警告：赋值dialogVisible触发Reactive Map不一致问题求助

先澄清：弹窗赋值不是问题根源 #

你贴的代码里dialogVisible.value = true是给布尔值赋值，根本不会触发这个警告。这个警告的核心是：同一个对象的原始版本和它的响应式包装版本（比如reactive()/ref()生成的）被同时当作了Reactive Map的键，导致Vue无法保证一致性。问题大概率出在resetForm()或者formData的赋值逻辑里。

常见触发场景&对应解决方案 #

1. 接口返回数据直接覆盖响应式对象 #

如果formData是用reactive()声明的响应式对象，直接赋值接口返回的原始数据会导致后续可能混用原始对象和响应式对象：

// 错误操作：直接覆盖响应式对象
formData.value = await ContractApi.getContractDetail(id)
// 正确操作：合并到响应式对象里
Object.assign(formData, await ContractApi.getContractDetail(id))
// 如果formData是ref声明的对象，确保后续所有操作都基于formData.value，不要单独存接口返回的原始数据

2. resetForm()里混用原始对象和响应式对象 #

如果重置表单时用原始对象覆盖响应式对象，也会埋下隐患：

// 错误示例：用原始对象重置
function resetForm() {
  formData = { name: '', code: '' }
}
// 正确示例：直接修改响应式对象的属性
function resetForm() {
  formData.name = ''
  formData.code = ''
}

3. 重复包装同一个原始对象为响应式 #

如果在多处对同一个原始对象调用reactive()，会生成多个不同的响应式包装实例，后续把这些实例和原始对象同时作为Map键就会触发警告：

// 错误：重复包装
const rawObj = { id: 1 }
const r1 = reactive(rawObj)
const r2 = reactive(rawObj) // 两个不同的响应式实例
// 正确：缓存响应式实例，同一个原始对象只包装一次
const cache = new WeakMap()
function getReactive(obj) {
  if (!cache.has(obj)) cache.set(obj, reactive(obj))
  return cache.get(obj)
}

4. 明确Map键的统一规则 #

如果业务必须用对象作为Map的键，要么全用原始对象，要么全用响应式对象，绝对不能交叉使用：

// 错误：混用原始和响应式对象当键
const map = new Map()
const raw = { id: 2 }
const reactiveRaw = reactive(raw)
map.set(raw, '原始')
map.set(reactiveRaw, '响应式') // 触发警告
// 正确：只使用响应式对象作为键
map.set(reactiveRaw, '响应式')

排查建议 #

回到你的代码，优先检查resetForm()的实现逻辑，以及formData的声明和赋值方式——这两个环节是触发警告的高风险点。按照上面的方案统一响应式对象的使用规则，就能消除这个警告。

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