Vue3中reactive对象不可直接赋值替换，否则丢失响应式；应使用Object.assign更新属性、ref包裹对象后赋值、或展开运算符批量覆盖。
Vue3 中用 reactive 创建的对象，不能直接用新对象赋值（比如 state = { a: 1 }），否则会丢失响应式——因为这相当于把变量指向了一个全新、未被 Vue 代理的对象，原来的 Proxy 实例被丢弃了。要实现“整体替换”又保持响应性，关键不是换掉代理本身，而是更新它内部的属性或借助其他机制。以下是三种真正有效、项目中广泛验证的方案：
方案一：用 Object.assign 清空并合并新数据
这是最常用且语义清晰的方式。它不替换 state 变量，而是修改其代理对象内部的属性，触发 Vue 的 set 拦截器。
操作步骤：
- 调用
Object.assign(state, 新对象)，把新数据的属性逐个写入原代理对象 - 如果需要清空旧属性，可先执行
Object.keys(state).forEach(key => delete state[key])，再合并 - 注意：不要写成
Object.assign({}, state, ...)，那会返回一个普通对象，失去响应性
示例：
<script setup>import { reactive } from 'vue'
const state = reactive({ count: 0, name: 'old' })
// 整体替换为新结构
Object.assign(state, { count: 100, name: 'new', active: true })
</script>
方案二：用 toRefs + ref 替代，支持自由赋值
如果你的业务逻辑中频繁需要整对象替换（比如表单重置、接口返回全新数据），推荐改用 ref 包裹对象。它天然支持 .value = 新对象，且类型安全、模板使用无差异。
优势：
- 替换操作简洁明确：
state.value = { a: 1, b: 2 } - 配合
toRefs解构后仍保持响应性（如const { a, b } = toRefs(state)） - 对 TypeScript 更友好，推断更稳定
适用场景：表单状态、配置对象、需多次重置的数据源。
方案三：用 spread + 赋值语法批量覆盖属性
适用于对象结构基本一致、只需更新部分字段的“类替换”场景。本质是利用展开运算符解构再赋值，等价于多次 state.key = value。
写法示例：
const newState = { count: 5, name: 'Vue' }Object.assign(state, { ...newState })
// 或简写为：
Object.assign(state, newState)
⚠️ 注意：该方式不会自动删除原对象中 newState 里不存在的字段。如需严格“镜像替换”，应先清空再赋值，或改用方案一的完整流程。
