Vue中如何还原数组元素的更改？

嘿，看起来你正在开发一个支持修改内部元素、还能交换对象位置的Vue组件，并且已经做了POC尝试实现状态还原功能对吧？我来帮你把这个还原方法给完善好！

首先，先把你给出的代码格式化展示出来：

export default {
  name: 'Landing',
  data () {
    return {
      items: [
        { id: 1, category: 'Something something' },
        { id: 2, category: 'Something something' }
      ]
    };
  },
  created() {
    this.originals = this.items.slice(0);
  },
  methods: {
    change() {
      this.items[0].category = 'Changed content';
      // 这里应该还会有交换对象位置的逻辑吧？
    }
    // 你需要的还原方法还没实现对吧？
  }
}

问题所在 #

你现在用this.items.slice(0)做的是浅拷贝，因为数组里的元素是对象（引用类型），所以originals里保存的其实是和items里一样的对象引用。这意味着当你修改items里对象的属性（比如category），或者交换对象位置后，originals里的内容也会跟着变化——这样你就没法用它来还原初始状态了！

解决思路 #

要实现真正的状态还原，你需要对原始数组做深拷贝，把所有对象的独立副本保存下来，这样后续修改items的时候不会影响到原始数据。然后写一个还原方法，把深拷贝的原始数据再赋值回items。

完整实现代码 #

这里给你两种常见的深拷贝方式，你可以选适合自己的：

方式1：用JSON序列化（简单无依赖） #

export default {
  name: 'Landing',
  data () {
    return {
      items: [
        { id: 1, category: 'Something something' },
        { id: 2, category: 'Something something' }
      ],
      originals: [] // 提前声明，避免Vue响应式问题
    };
  },
  created() {
    // 深拷贝原始数组，保存独立副本
    this.originals = JSON.parse(JSON.stringify(this.items));
  },
  methods: {
    // 修改元素属性的方法
    change() {
      this.items[0].category = 'Changed content';
    },
    // 交换指定位置对象的方法
    swapItems(index1, index2) {
      [this.items[index1], this.items[index2]] = [this.items[index2], this.items[index1]];
    },
    // 还原初始状态的方法
    restoreOriginal() {
      // 再次深拷贝，避免后续修改originals
      this.items = JSON.parse(JSON.stringify(this.originals));
    }
  }
}

方式2：用Lodash的cloneDeep（更可靠，支持复杂数据类型） #

如果你项目里已经用了Lodash，或者需要处理Date、函数这类JSON序列化无法处理的类型，推荐用这个：

// 先确保安装了lodash：npm i lodash
import cloneDeep from 'lodash/cloneDeep';

export default {
  name: 'Landing',
  data () {
    return {
      items: [
        { id: 1, category: 'Something something' },
        { id: 2, category: 'Something something' }
      ],
      originals: []
    };
  },
  created() {
    this.originals = cloneDeep(this.items);
  },
  methods: {
    change() {
      this.items[0].category = 'Changed content';
    },
    swapItems(index1, index2) {
      [this.items[index1], this.items[index2]] = [this.items[index2], this.items[index1]];
    },
    restoreOriginal() {
      this.items = cloneDeep(this.originals);
    }
  }
}

关键说明 #

• 深拷贝保证了originals里的对象和items里的对象完全独立，修改任何一方都不会影响另一方。
• 还原的时候再次深拷贝originals，是为了避免后续修改items时不小心污染originals的原始数据。
• 交换位置的逻辑我帮你补了一个swapItems方法，你可以直接用这个来交换指定索引的对象，还原时调用restoreOriginal就能回到初始的数组顺序和对象属性状态。

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