vue---赋值后原对象的值发生改变

最近在开发VUE项目，遇到一个神奇的问题：赋值后原对象的值也会发生改变。实例：

<script>
export default {
  name: "",
  data() {
    return {
      datas:{
        today:'星期一',
        state:'1'
      }
    };
  },
  methods: {
    handleClick1(){
      let datas = this.datas;
      datas.today = '星期二';
      datas['state'] = parseInt(datas['state']) ? 1 : 0;
      console.log(this.datas.today); // 星期二
      console.log(this.datas.state,typeof(this.datas.state)); // 1 number
    },
    handleClick2(){
      let datas = JSON.parse(JSON.stringify(this.datas));
      datas.today = '星期二';
      datas['state'] = parseInt(datas['state']) ? 1 : 0;
      console.log(this.datas.today); // 星期一
      console.log(this.datas.state,typeof(this.datas.state)); // 1 string
    },
    handleClick3(){
      let datas = Object.assign({},this.datas);
      datas.today = '星期二';
      datas['state'] = parseInt(datas['state']) ? 1 : 0;
      console.log(this.datas.today); // 星期一
      console.log(this.datas.state,typeof(this.datas.state)); // 1 string
    }
  }
};
</script>

问题：在handleClick1中，定义了datas局部变量，修改的时候，将这个datas里面的【today】值改为【星期二】，原【datas】里面的值也变为【星期二】

原因：在VUE中【=】在对象赋值里面，没有进行深层赋值，【let datas】指向的依旧是【datas】里面的原地址，所以修改了【let datas】里面的属性，【datas】里面的属性也会发生改变。

分析：内存地址指向的是同一个内存地址。

解决方法一：创建一个新的对象，指向新的内存地址，通过JSON解析。同 handleClick2

let datas = JSON.parse(JSON.stringify(this.datas));

解决方法二：es6之展开Object.assign（拷贝obj的内容到一个新的堆内存，copyObj存储新内存的引用），同handleClick3

let datas = Object.assign({},this.datas);

解决方法三：es6之展开运算符（仅用于数组）同handleClick4

let copyArr = [...obj];

还有一种方法，通过JS的深度拷贝，没有测试，等抽口测试了，再来更新。