Vue复制数据对象删除属性时影响原对象，如何避免修改根数据？

你遇到的这个问题其实是JavaScript里引用类型的特性导致的：当你执行var postData = this.rows时，并没有真正复制整个数组和里面的对象，只是把postData指向了和this.rows同一个内存地址的引用。也就是说，postData和this.rows其实是同一个数组，里面的每个对象也是同一个引用，所以你修改postData里的对象属性，自然会影响到Vue根数据里的原对象。

要解决这个问题，关键是要创建原数据的独立副本，再对副本进行修改，这样就不会影响原数据了。这里有几种实用的方法：

方法1：使用数组map配合对象解构（推荐） #

这种方法简洁高效，还能避免多余的引用：

// 遍历原数组，为每个元素创建新对象，按需排除属性
const postData = this.rows.map(item => {
  if (item.public) {
    // 解构item，剔除info属性，返回剩余属性组成的新对象
    const { info, ...rest } = item;
    return rest;
  }
  // 不需要修改的元素，也返回一个浅拷贝的新对象，避免引用原数据
  return { ...item };
});

const uploadData = { blogpost: postData };
// 后续的axios请求逻辑不变
axios({
  method: 'post',
  url: myUrl,
  responseType: 'json',
  data: uploadData
})

方法2：深拷贝后再修改（适合嵌套数据结构） #

如果你的rows里的对象有多层嵌套，浅拷贝不够用，可以用JSON.parse(JSON.stringify())做深拷贝（注意：这种方法无法处理函数、Date、正则等特殊类型）：

// 深拷贝原数组，生成完全独立的副本
const postData = JSON.parse(JSON.stringify(this.rows));

// 现在修改副本就不会影响原数据了
postData.forEach(function(o) {
  if (o.public === true) {
    delete o.info;
  }
});

const uploadData = { blogpost: postData };
// 发送请求...

方法3：手动创建新对象 #

如果你习惯用forEach，可以手动为每个元素创建新对象：

const postData = [];
this.rows.forEach(item => {
  // 浅拷贝原对象到新对象
  const newItem = { ...item };
  if (newItem.public) {
    delete newItem.info;
  }
  postData.push(newItem);
});

const uploadData = { blogpost: postData };
// 发送请求...

不管用哪种方法，核心都是切断副本和原数据的引用关系，让你修改的是完全独立的新数据，这样就不会意外修改Vue的根数据啦。

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