Vue中unshift方法仅重复最后一项问题求助

这个问题我之前也碰到过，大概率是对象引用重复在搞鬼！

问题根源 #

你数组里存的是对象的引用地址，不是对象本身。如果unshift进去的不是全新的对象实例，而是和数组里已有元素共用了同一个引用，那当这个引用指向的对象内容变化时，数组里所有指向该引用的元素都会同步改变，看起来就像是所有元素都变成了最后修改的那个内容。而push正常是因为你可能在push时无意中创建了新对象，或者没有复用已有引用。

解决方案 #

针对你的remate.lotes数组，给你几个靠谱的解决方法：

1. 直接创建全新对象添加

如果新元素是独立的，直接生成一个新对象unshift进去：

// 示例：添加id为3、nombre为"新批次"的元素
this.remate.lotes.unshift({ id: 3, nombre: "新批次" });

2. 基于现有对象复制出新对象再添加

如果新元素需要基于已有批次修改，一定要先复制出独立的新对象，再修改并添加：

• 用ES6对象展开运算符（适合浅拷贝）：

// 基于已有批次创建新对象，修改id和nombre
const baseLote = this.remate.lotes[0];
const newLote = { ...baseLote, id: 3, nombre: "修改后的新批次" };
this.remate.lotes.unshift(newLote);

• 用JSON.parse(JSON.stringify())做深拷贝（适合嵌套对象）：

const baseLote = this.remate.lotes[0];
// 深拷贝生成全新对象
const newLote = JSON.parse(JSON.stringify(baseLote));
newLote.id = 3;
newLote.nombre = "修改后的新批次";
this.remate.lotes.unshift(newLote);

3. 避坑提醒：别直接复用已有对象引用

绝对要避免这种错误写法：

// ❌ 错误！会导致引用重复
const tempLote = this.remate.lotes[1];
tempLote.id = 3;
this.remate.lotes.unshift(tempLote);

这里tempLote是数组里已有元素的引用，修改它并unshift后，数组里的原元素和新元素都会指向同一个对象，自然显示内容完全一致。

按上面的正确方法操作后，每个数组元素都是独立的对象引用，unshift就不会再出现重复最后一项的问题啦！

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