VueJS调用push()时复制前一JSON节点数据的异常问题

嘿，这问题我太熟了！你碰到的其实是JavaScript引用类型的经典坑——你在push的时候，大概率是直接复用了已有对象的内存引用，而不是创建一个全新的对象实例。导致新添加的节点和之前的节点指向同一块内存空间，所以看起来像是复制了前一个节点的数据，其实它们根本就是同一个对象！

问题根源分析 #

先看你的接口返回数据，movies是对象数组，每个movie里的chars也是对象数组——这些都是引用类型。在JS里，当你把一个对象赋值给变量或者push到数组时，复制的不是对象的内容，而是它的内存地址。举个例子，假设你可能写了类似这样的错误代码：

// 错误示例：直接引用已有对象
const existingChar = this.movies[0].chars[0];
this.movies[0].chars.push(existingChar);

// 或者添加新movie时直接复用已有对象
const existingMovie = this.movies[0];
this.movies.push(existingMovie);

这时候你会发现，新push的元素和原元素完全“同步”，修改其中一个另一个也跟着变，在Vue视图上就表现为“复制了前一节点的数据”。

解决方案：创建新的对象实例 #

要解决这个问题，核心就是每次push时都创建一个全新的对象副本，而不是复用已有引用。根据你的数据复杂度，有几种常用方法：

1. 解构赋值（适合层级较浅的对象） #

解构赋值可以快速创建对象的浅拷贝，对于你的chars对象这种单层结构非常好用：

// 添加新character的正确写法
const newChar = { ...this.movies[0].chars[0] }; // 解构创建新对象
this.movies[0].chars.push(newChar);

// 如果要添加新movie，记得连子数组一起解构
const newMovie = {
  ...this.movies[0],
  chars: this.movies[0].chars.map(char => ({ ...char })) // 对chars数组里的每个对象也做解构
};
this.movies.push(newMovie);

2. JSON序列化/反序列化（适合无特殊类型的对象） #

如果你的对象里没有函数、Symbol、undefined这类JSON不支持的类型，可以用这个方法做深拷贝：

const newChar = JSON.parse(JSON.stringify(this.movies[0].chars[0]));
this.movies[0].chars.push(newChar);

优点是简单粗暴，缺点是会丢失JSON不兼容的数据类型，性能也不如手动拷贝。

3. 手动创建新对象（最稳妥） #

如果数据结构不复杂，直接手动创建新对象是最不容易出错的：

const newChar = {
  name: "New Character Name",
  picture: "new_picture.jpg"
};
this.movies[0].chars.push(newChar);

4. 深拷贝工具函数（适合复杂嵌套结构） #

如果你的数据层级很深，可以自己实现一个深拷贝函数，这里给一个简单的实现：

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Array) return obj.map(item => deepClone(item));
  const newObj = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepClone(obj[key]);
    }
  }
  return newObj;
}

// 使用示例
const newMovie = deepClone(this.movies[0]);
this.movies.push(newMovie);

额外注意：Vue响应式更新 #

如果修改嵌套对象后视图没有更新，记得用Vue的this.$set方法，或者直接替换整个数组/对象，确保Vue能检测到变化。不过你这个问题的核心还是引用重复，解决了引用问题后，响应式更新一般就正常了。

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