Vue.js中如何避免数据赋值时的对象双向绑定问题

嘿，这个问题我太熟了——本质上是JavaScript对象的引用特性在搞鬼！咱们先搞清楚为什么会出现这个问题，再一步步解决它。

问题根源 #

在JS里，对象和数组都是引用类型，当你直接把this.selectedItem = this.items[0]赋值时，并没有复制这个对象本身，只是把指向原对象的内存地址引用给了selectedItem。这就相当于两个人共用一个抽屉，不管谁打开抽屉放东西，另一个人看到的都是同一个抽屉里的内容——所以你修改selectedItem的title时，items[0]自然也会跟着变。

解决方案：断开引用，创建独立对象 #

要解决这个问题，核心就是复制原对象的内容，创建一个全新的独立对象，让selectedItem指向这个新对象，而不是原数组里的那个。根据你的对象结构，有几种常用方法：

1. 浅拷贝（适合单层结构的对象）

如果你的item对象只有一层属性（没有嵌套的对象或数组），用展开运算符...或者Object.assign()就能搞定：

mounted() {
  // 方法1：展开运算符
  this.selectedItem = {...this.items[0]};
  
  // 方法2：Object.assign
  // this.selectedItem = Object.assign({}, this.items[0]);
}

这两种方式都会创建一个新对象，把原对象的所有顶层属性复制进去，彻底断开和原对象的引用关联。

2. 深拷贝（适合有嵌套结构的对象）

如果你的item对象里还有嵌套的对象或数组（比如{ title: 'xxx', detail: { content: 'yyy' } }），浅拷贝就不够用了——因为嵌套的对象还是引用类型。这时候需要用深拷贝：

• 最简单的方法（有局限性）：用JSON.parse(JSON.stringify())序列化再反序列化：

mounted() {
  this.selectedItem = JSON.parse(JSON.stringify(this.items[0]));
}

⚠️ 注意：这个方法不能处理函数、Symbol、undefined，还有日期对象会被转成字符串，如果你的对象里有这些类型，就别用这个方法。

• 更可靠的方法：用lodash的cloneDeep（如果项目里已经引入了lodash）：

import _ from 'lodash';

mounted() {
  this.selectedItem = _.cloneDeep(this.items[0]);
}

这个方法能完美处理各种嵌套结构和特殊类型，是生产环境里的首选。

验证效果 #

修改之后，你再在输入框里修改selectedItem的title，就会发现只有selectedItem的属性变了，items数组里的原对象完全不受影响——这就是你想要的效果啦！

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