Vue中重置v-model时，如何避免同步更新已存入数组的对象？

嘿，这个问题我之前也碰到过！核心原因是JavaScript对象的引用特性在搞鬼：当你执行this.users.push(this.user)时，数组里存储的并不是this.user对象的独立副本，而是指向这个对象的内存引用。所以当你后续修改this.user的属性时，数组里对应的元素因为和原对象共享同一个内存地址，自然会跟着被清空。

下面给你两种简单有效的解决办法：

方法一：添加时创建对象副本 #

每次添加用户时，先复制this.user的属性到一个新对象，再把这个新对象push进数组。这样数组里的元素和原this.user就没有引用关联了：

使用对象展开运算符（ES6+） #

add() {
  // 复制this.user的所有属性到新对象
  this.users.push({ ...this.user });
  // 清空原对象属性
  this.user.name = '';
  this.user.phone = '';
}

使用Object.assign（兼容性更好） #

如果需要兼容旧环境，可以用Object.assign来创建副本：

add() {
  this.users.push(Object.assign({}, this.user));
  this.user.name = '';
  this.user.phone = '';
}

方法二：重置时重新赋值新对象 #

另一种思路是，添加完用户后，直接给this.user赋值一个全新的空对象，切断原对象的引用关系：

add() {
  this.users.push(this.user);
  // 重新创建一个空对象，替换原user
  this.user = { name: '', phone: '' };
}

注意：这种方法需要确保你在Vue的data选项里已经初始化了user为对象类型，比如：

data() {
  return {
    user: { name: '', phone: '' },
    users: []
  }
}

两种方法都能解决你的问题，选哪种取决于你的代码风格和环境兼容性需求~

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