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的深度拷貝，沒有測試，等抽口測試了，再來更新。