javaScript中data值的联动变化

一、起因介绍

在写vue项目时，有时为了界面调整方便需要自定义一些参数，这些参数是不存在于后端接口的参数中的，因此在调用接口前就需要把这些用于前端的参数给删除

data () {
  return {
    testObj: {
      delItem:'用于前端的参数',
      useItem:'用于后端的参数'
    }
  }
}

二、联动变化

因为这些参数对前端来说还是有用的，所以不能删除testObj的参数，这时就需要一个新的对象来存储testObj的值，并且做出修改

错误引用：引用同一内存地址
以下引用中apiObj和testObj指向地址是相同的，因此无论修改apiObj还是testObj，他们的参数值都会发生改变

var apiObj = this.testObj

三、解决方法

正确引用：创建新对象并引用值
以下引用中apiObj和testObj指向的内存地址不相同，因此对任一方做出修改时不会影响到另一方的值

var apiObj = JSON.parse(JSON.stringify(this.testObj))