vue中重置响应式数据须原地修改而非替换引用:vue2用object.assign(this.$data, init)保留劫持,vue3用object.assign(state, initform())维持proxy追踪,深拷贝需toraw→clone→assign闭环。

在 Vue 状态机(尤其是 Vue2 的 data 或 Vue3 的 reactive/ref)中重置数据,不能只做普通深拷贝,必须兼顾响应式系统的工作机制。直接用 JSON.parse(JSON.stringify()) 或 structuredClone 得到的只是普通对象,赋值后会丢失响应式;而直接替换整个 reactive 引用(如 state = reactive({}))则会让 Vue 停止追踪——视图不再更新。
Vue2 中重置 data 要保留 $data 引用
Vue2 的响应式依赖于对 this.$data 对象属性的劫持。重置时不能新建 data 对象,而要“原地覆盖”其所有属性:
- 基础场景:用
Object.assign(this.$data, this.$options.data.call(this)),这是最轻量、最安全的浅层重置方式 - 含嵌套对象/数组:需递归处理,或先深拷贝初始数据再逐层
this.$set赋值,避免跳过响应式追踪 - 常见错误:
this.$data = {...}或this.data = initial—— 这会切断响应式连接,视图冻结
Vue3 中重置 reactive 必须修改属性而非替换引用
reactive 返回的是 Proxy 实例,Vue 只监听该实例内部属性变化。重置逻辑必须是“改内容”,不是“换对象”:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 推荐模式:定义一个初始化函数,如
const initForm = () => ({ name: '', list: [] }),然后Object.assign(state, initForm()) - 若初始值来自异步或计算(比如接口返回的模板),应在 setup 中缓存一份深拷贝后的原始快照,例如:
const defaultState = structuredClone(toRaw(apiData)),再用Object.assign(state, defaultState) - 切忌:
state = reactive(initForm())—— 新对象未被当前组件响应式系统接管
深拷贝必须走“解包—拷贝—重包”闭环
当初始状态本身是响应式对象(比如从 props 接收的 reactive 数据),直接拷贝会失败。必须按三步操作:
-
解包:用
toRaw()(Vue3)或JSON.parse(JSON.stringify())(仅限简单结构,Vue2)拿到纯 JS 数据 -
拷贝:现代环境用
structuredClone(toRaw(origin));兼容旧版或含函数/正则等,选lodash.cloneDeep() -
重包:拷贝结果是普通对象,如需响应式,再用
reactive(clone)或ref(clone)包裹;但重置时通常只需把 clone 内容写回现有响应式对象(即上一步的Object.assign)
表单类场景建议分离“编辑态”与“初始态”
用户编辑的是副本,初始值始终只读,重置就是“丢弃编辑、恢复副本”:
- Vue2:created 中执行
this.defaultForm = JSON.parse(JSON.stringify(this.$data)),重置时Object.assign(this.$data, this.defaultForm) - Vue3:setup 中
const defaultForm = toRaw(props.form) ? structuredClone(toRaw(props.form)) : initForm(),后续Object.assign(formState, defaultForm) - 优势:避免嵌套引用污染、支持撤销/重做、逻辑清晰易测试
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










