Vue.js中保存对象修改前的值及恢复问题求助

嘿，我完全懂你遇到的困扰——这其实是JavaScript引用类型的特性导致的，和Vue本身关系不大，但Vue的响应式系统会让这个问题更直观地暴露出来～

问题根源 #

当你直接执行this.myFilters = this.filters的时候，并没有真正复制一份filters对象，只是让this.myFilters和this.filters指向了内存中的同一个对象。所以不管你修改哪一个变量的属性，另一个都会跟着变——因为它们本质上是同一个东西，只是名字不同而已。

解决方案：创建对象的拷贝 #

要解决这个问题，你需要创建原对象的独立拷贝，让两个变量指向不同的内存地址。根据你的对象结构，有两种常用方式：

1. 浅拷贝（适合无嵌套的简单对象）

如果你的filters对象里只有基本类型属性（字符串、数字、布尔值等），没有嵌套的子对象或数组，用对象展开运算符或者Object.assign就能搞定：

// 初始化保存副本的时候
this.myFilters = {...this.filters}
// 或者用Object.assign
this.myFilters = Object.assign({}, this.filters)

2. 深拷贝（适合有嵌套结构的对象）

如果filters里有嵌套的对象或数组，浅拷贝只会复制外层对象的引用，内层的嵌套数据还是会同步变化。这时候需要用深拷贝：
最简便的方法（适合纯数据对象，不含函数、Symbol等特殊类型）：

this.myFilters = JSON.parse(JSON.stringify(this.filters))

这个方法会把对象转成JSON字符串再解析回来，彻底创建一个全新的独立对象。

修改你的retrieve方法 #

结合上面的方案，你的retrieve方法可以改成这样（这里用浅拷贝举例，如果有嵌套就换成深拷贝的写法）：

retrieve () {
  // 如果myFilters存在，就把它的拷贝赋值给filters；否则用filters自身的拷贝（避免后续引用问题）
  this.filters = this.myFilters ? {...this.myFilters} : {...this.filters}
}

另外建议在组件初始化的时候（比如created钩子）就先做好副本保存，避免后续操作中意外同步：

created() {
  // 组件加载时就保存filters的初始副本
  this.myFilters = {...this.filters}
}

补充说明 #

Vue的响应式系统是通过追踪对象的引用来实现的，但核心问题还是JavaScript中对象和数组都是引用类型——只要两个变量指向同一个引用，修改其中一个必然会影响另一个。所以关键在于打破引用关系，创建独立的拷贝。

内容的提问来源于stack exchange，提问作者carlo