直接赋值会丢失响应式，正确重置方式有三：①Object.assign(state, initialState)保留引用；②createResettableReactive工厂函数封装初始化与重置；③ref + toRefs组合，重置时修改.value。
直接给 reactive 对象重新赋值（比如 state = { a: 0 }）会彻底丢失响应式，因为 Vue 追踪的是原始 Proxy 实例，而不是变量名。新对象没有被 reactive 包裹，也不是同一个引用，组件就“看不见”变化了。
下面这几种方式能真正重置，且保持响应式连接不断：
用 Object.assign 逐项覆盖属性
保留原 reactive 对象的引用，只更新它的内部属性：
- 先定义好初始数据（普通对象，非响应式）
- 重置时用
Object.assign(state, initialState)
const initialState = { name: '', age: 0, tags: [] }
const state = reactive({ ...initialState })
// 重置时
function reset() {
Object.assign(state, initialState)
}✅ 优点：简洁、无额外依赖、适合浅层结构
⚠️ 注意：对嵌套对象只做浅拷贝，state.user.name 会被重置，但 state.user 引用不变；若需深层清空，得手动处理或配合深克隆
封装可重置的 reactive 工厂函数
把初始化和重置逻辑打包，避免重复写初始值：
立即学习“前端免费学习笔记（深入）”；
function createResettableReactive(initial) {
const state = reactive({ ...initial })
const reset = () => {
// 简单场景用 JSON 序列化还原（支持 Date/RegExp 以外的常见类型）
Object.assign(state, JSON.parse(JSON.stringify(initial)))
}
return { state, reset }
}
// 使用
const { state, reset } = createResettableReactive({ count: 0, user: { id: 1 } })
reset() // 安全触发视图更新✅ 优点：复用性强，逻辑集中，适合多处表单或模态框
⚠️ 注意：含函数、Date、RegExp 或循环引用时，JSON.stringify 会失效；此时建议用 lodash.cloneDeep 或手写重置逻辑
改用 ref + toRefs 解耦结构
尤其适合组合式 API 中需要频繁重置的场景（如弹窗、表单）：
const stateRef = ref({ name: '', age: 0 })
const { name, age } = toRefs(stateRef)
// 重置只需改 .value，响应式依然有效
function reset() {
stateRef.value = { name: '', age: 0 }
}✅ 优点：赋值自由，语义清晰，天然支持任意结构替换
⚠️ 注意：toRefs 后各属性是独立的 ref，若后续要批量操作，不如直接操作 stateRef.value
不复杂但容易忽略
