vue 3 中 reactive 对象直接赋新对象会丢失响应式，因赋值操作替换了引用，而 vue 只代理原始对象；正确方式是逐个赋值、object.assign 合并或封装 reset 函数操作原对象。
Vue 3 中用 reactive 创建的对象，直接赋新对象会丢失响应式，根本原因是：JavaScript 的赋值操作替换了整个引用，而 Vue 的响应式系统只代理了原始对象，不自动追踪新对象。
别用 = 直接覆盖 reactive 对象
这是最常见错误：
const state = reactive({ count: 1, name: 'Alice' })
state = { count: 0, name: 'Bob' } // ❌ 完全失效：state 变成普通对象，不再响应式
原因：这行代码相当于重新声明了一个局部变量（在严格模式下甚至会报错），原始的响应式代理被丢弃。响应式必须作用于同一内存地址的对象上。
正确重置对象的三种实用方式
-
逐个属性赋值（推荐用于少量字段）：
保持原对象引用，只更新内部属性，响应式持续生效。state.count = 0<br>state.name = 'Bob'
-
使用 Object.assign() 合并到原对象：
不创建新引用，所有变更仍在原 reactive 对象上。Object.assign(state, { count: 0, name: 'Bob' })
注意：仅对已有 key 生效；新增 key 不会触发响应（除非用defineProperty或ref配合） -
用 replace 方法重建内部状态（适合复杂重置）：
先清空再填充，确保结构一致且响应式保留。Object.keys(state).forEach(key => delete state[key])<br>Object.assign(state, { count: 0, name: 'Bob' })
进阶技巧：封装可复用的 reset 函数
避免重复写重置逻辑，可以封装一个安全 reset 工具：
function resetReactive(target, freshData) {
Object.keys(target).forEach(key => delete target[key])
Object.assign(target, freshData)
}
// 使用
resetReactive(state, { count: 0, name: 'Bob', list: [] })
这个函数保证始终操作原响应式对象，兼容嵌套结构（只要 freshData 是 plain object），也便于单元测试和统一维护。
特别提醒：数组和深层嵌套对象
如果 reactive 对象里包含数组或子对象，直接替换子属性也会断开响应式：
state.items = [{ id: 1 }] // ❌ items 原来是 reactive 数组？这样赋值后不再是响应式数组
正确做法：
- 数组用
.length = 0清空 +.push(...newItems)填充 - 子对象仍用
Object.assign(childObj, newData)或逐个赋值 - 需要动态增删 key 的场景，优先考虑
ref+shallowRef或markRaw配合使用
响应式不是魔法，它依赖 Vue 对同一对象的持续代理。只要不替换顶层引用，重置就很简单。
