Proxy代理绑定内存地址而非变量名，重赋值会断开响应式；应改内容而非换引用，或改用ref+toRefs、封装可重置reactive工厂函数。
因为 reactive 返回的是一个 Proxy 代理对象，它只对**原始对象的引用**做响应式追踪。一旦你写 state = { a: 1 }，就等于把变量指向了一个全新、未经 reactive 包裹的普通对象——Vue 再也监听不到它的变化了。
根本原因：Proxy 代理绑定的是内存地址，不是变量名
Vue3 的响应式系统靠 Proxy 拦截属性读写。这个 Proxy 实例和你最初传入的对象强绑定。重赋值相当于“换掉了被代理的对象”，但没给新对象加代理，自然失效。
常见误操作包括：
-
user = { name: 'Tom', age: 25 }（直接替换整个引用） -
list = apiData.items（数组也被替换成普通数组） -
form = { ...initialForm }（破坏原有 reactive 结构）
安全重置方案：不换引用，只改内容
保持原 reactive 对象不变，只更新它的属性值。这样 Proxy 还在，响应式连接不断。
React 组件生成器
下载
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
- 用
Object.assign(state, initial)浅层覆盖所有顶层字段 - 对数组：先清空再填充，比如
arr.length = 0; arr.push(...newData)或arr.splice(0, arr.length, ...newData) - 嵌套对象若需深层重置，且初始值可序列化，可用
Object.assign(state, JSON.parse(JSON.stringify(initial)))
更灵活的替代方案：ref + toRefs
如果对象结构常变、或频繁整块替换，推荐改用 ref 包裹整个对象：
const stateRef = ref({ count: 0, user: null })- 模板中直接用
{{ stateRef.count }}（需配合toRefs解构） - 重置时只需
stateRef.value = { count: 0, user: null }—— 因为.value是响应式入口，赋值仍受追踪
进阶技巧：封装可重置的 reactive 工厂函数
把初始化和重置逻辑收口，避免硬编码初始值：
- 定义
createResettableReactive(initial)，内部用reactive(initial)创建状态，并暴露reset()方法 -
reset内部调用Object.assign(state, initial)，或根据需要集成深克隆 - 适合表单、搜索条件、模态框等有明确“初始态”的场景
