Vue脱坑之如何解决vue 赋值后原数据随赋值后的数据的变化而变化

Vue脱坑之如何解决vue 赋值后原数据随赋值后的数据的变化而变化

转载 出处

问题原因

1.在vue中 this.A = this.B,没有进行深层赋值，只是把this.A的地址指向了与this.B相同的地址，所有对于A的修改会影响到B
2.解决相互影响的思路是在this.A必须是新建的一个对象，这样才能保证不被指向同一地址，属性修改不会相互影响

错误实例

  		this.leftColumn = {...this.Columns};
      	this.rightColumn =  {...this.Columns};

正确实例

		this.leftColumn = JSON.parse(JSON.stringify(this.Columns));
		this.rightColumn = JSON.parse(JSON.stringify(this.Columns));