一个vue变量赋值给一个新的变量，对这个新的变量里的值做更改，vue的变量也变了。

data () {
    return {
      data: {
        a: 1,
        b: 2,
        c: 3
      }
    }
  },
  mounted () {
    let str = this.data
    str.a = 4
    console.log(this.data)
    console.log(str)
  }

以上两个a值都变为4。

解决方案：

方法一

改变数据类型，就是把变量先转成字符串,再把字符串转成对象，再进行赋值，vue的变量就不会被改变了

    let str = JSON.parse(JSON.stringify(this.data))
    str.a = 4
    console.log(this.data)
    console.log(str)

方法二

let str = {...this.data}
str.a = 4
console.log(this.data)
console.log(str)