直接赋值会失效，因为新对象未被 reactive 包裹，丢失 proxy 代理，vue 无法追踪变化；应逐项赋值、封装重置函数或改用 ref + torefs。

Vue 的 reactive 创建的响应式对象，不能直接用新对象赋值来“重置”，因为这会切断响应式连接——新对象不是由 reactive 包裹的，不再受 Vue 响应式系统追踪。

为什么直接赋值会失效？

当你写 state = reactive({ a: 1 })，再执行 state = { a: 2 }，变量 state 指向了一个普通对象，Vue 已经无法监听它的变化。响应式依赖的是内部的 Proxy 实例，替换引用就等于丢掉了这个代理。

推荐方案：清空并逐个赋值（保留响应式引用）

不更换引用，而是复用原 reactive 对象，把它的所有属性重设为初始值：

• 先保存初始结构（如 const initial = { count: 0, name: '' }）
• 用 Object.keys(initial).forEach(key => state[key] = initial[key]) 逐项覆盖
• 或使用 Object.assign(state, initial) —— 注意：它只做浅拷贝，对嵌套对象有效但不递归重置深层响应式

进阶方案：封装可重置的 reactive 工厂函数

把初始化和重置逻辑收拢，避免重复写初始值：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

function createResettableReactive(initial) {
  const state = reactive({ ...initial });
  const reset = () => Object.assign(state, JSON.parse(JSON.stringify(initial)));
  return { state, reset };
}

// 使用
const { state, reset } = createResettableReactive({ count: 0, user: { id: 1 } });
reset(); // 安全重置，支持简单嵌套（JSON 可序列化的场景）

⚠️ 注意：若初始值含函数、Date、RegExp 或循环引用，JSON.parse(JSON.stringify()) 会丢失；此时建议手动定义 reset 方法或用深克隆库（如 lodash 的 cloneDeep）。

替代思路：用 ref + toRefs 解耦结构（适合组合式 API 场景）

如果对象结构较复杂或需频繁重置，可改用 ref 包裹整个对象，再用 toRefs 暴露响应式字段：

• const stateRef = ref({ count: 0, name: '' })
• const { count, name } = toRefs(stateRef)
• 重置时只需 stateRef.value = { count: 0, name: '' } —— 因为 ref 的 .value 是响应式入口，赋值仍保持追踪

这种方式更灵活，尤其适合表单重置、模态框状态管理等场景。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！