直接赋值会失效，因为新对象未被 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-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
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是响应式入口，赋值仍保持追踪
这种方式更灵活，尤其适合表单重置、模态框状态管理等场景。
