不能直接给 reactive 对象重新赋值，否则会丢失响应式连接；应保留 proxy 实例，仅更新内部属性，常用 object.assign 浅层覆盖，或封装 reset 函数支持深层重置，亦可用 ref + torefs 方案兼顾解构与重置。
不能直接给 reactive 对象重新赋值，否则会丢失响应式连接。重置的本质是保留原 Proxy 实例，只更新其内部属性值。
用 Object.assign 逐项覆盖
这是最常用、最轻量的方式，适用于结构较简单、嵌套不深的表单对象。
- 先定义一个普通对象作为初始状态（非 reactive）
- 调用 Object.assign(state, initialState)，把初始值“拷贝进”原响应式对象
- 注意：仅做浅层覆盖。如果 state.user 是个嵌套对象，user 的引用不变，但 user 内部属性会被重置
- 对数组也有效：initialState.hobbies = [] 会清空 state.hobbies，且保持其响应式数组身份
封装可重置的 reactive 工厂函数
适合多处复用、结构较固定或需统一管理重置逻辑的场景（如多个弹窗表单）。
react-best-practices
下载
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
- 创建函数 createResettableReactive(initial)，内部用 reactive 包裹，并返回 state 和 reset 方法
- reset 方法内部可用 Object.assign(state, JSON.parse(JSON.stringify(initial))) 支持简单深层重置
- 若 initial 含函数、Date、RegExp 或循环引用，JSON 方案会失效，此时应改用 lodash.cloneDeep 或手动遍历重置
改用 ref + toRefs 组合管理
适合需要频繁解构使用、或初始值来自异步/计算逻辑的场景。
- 用 const stateRef = ref(initialState) 创建响应式引用
- 在 setup 中用 const { name, age } = toRefs(stateRef.value) 解构出响应式属性
- 重置时只需 stateRef.value = { ...initialState }，既保持响应式，又避免 Proxy 引用丢失问题
- 模板中仍可直接用 {{ name }}，无需 .value，体验接近 reactive
三种方式核心一致：不换盒子，只换里面的东西。选哪种取决于你的数据结构复杂度和项目维护习惯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
