Vue中异步后直接赋新值导致界面不更新，因state指向了非响应式对象；推荐用Object.assign保持引用、ref+toRefs解构或createResettableReactive封装重置逻辑。
异步请求返回后给 reactive 对象直接赋新值，界面不更新——这不是 bug，是响应式机制的必然结果。根本原因在于：Vue 追踪的是原始 Proxy 实例的属性变化，而不是变量名本身；一旦你写 state = response.data，就等于把变量指向了一个全新、未被 reactive 包裹的普通对象，响应式链路彻底断开。
用 Object.assign 保持引用，只改内容
这是最轻量、最常用的方式，适用于结构稳定、初始值明确的场景。
- 先定义好非响应式的初始数据（纯 JS 对象）：
const initialForm = { name: '', age: 0, tags: [] } - 创建 reactive 状态：
const form = reactive({ ...initialForm }) - 请求完成后，用
Object.assign(form, response.data)覆盖所有顶层字段 - 对数组可先清空再填充：
list.length = 0; list.push(...response.items)或list.splice(0, list.length, ...response.items)
嵌套对象需深层重置？用 JSON 序列化还原
当初始值不含函数、Date、RegExp 或循环引用时，JSON.parse(JSON.stringify(initial)) 是安全的深拷贝手段。
- 例如：
Object.assign(form, JSON.parse(JSON.stringify(initialForm))) - 它能真正还原嵌套结构（如
form.user.profile.avatar），而 Object.assign 只做浅层覆盖 - 若数据含不可序列化类型（如 Date），建议手写 reset 方法，或引入
lodash.cloneDeep
结构易变或频繁重置？改用 ref + toRefs
尤其适合表单、弹窗、搜索条件等有明确“初始态”的场景，逻辑更清晰，重置也更直白。
立即学习“前端免费学习笔记（深入）”；
- 声明：
const formRef = ref({ name: '', age: 0 }) - 解构（模板中可直接用）：
const { name, age } = toRefs(formRef) - 重置只需：
formRef.value = { name: '', age: 0 }—— 因为.value是响应式入口，赋值仍受追踪 - 避免了 reactive 的引用绑定限制，也不用担心深浅拷贝问题
封装可复用的重置能力：createResettableReactive
把初始化和重置收口，适合多处使用相同状态逻辑的组件（如多个表单页）。
- 工厂函数内部维护初始值，并暴露
reset()方法 - reset 内部调用
Object.assign(state, deepClone(initial))，保证响应式不断 - 调用时只需：
const { state, reset } = createResettableReactive(initialForm) - 既保留 reactive 的简洁模板语法，又获得一键重置能力
