vue.set的使用和vue數據的序列化

　　首先簡單說一下vue雙向數據綁定在實際應用上會有一點異常。

　　1.比如我想使用一個數組內部數據的改變，直接使用arr[0]=‘bbbb’，這樣是不會觸發數據綁定的。視圖不會變化。

　　2.這個問題就純是js的問題了。。我們需要把一個json數據的值賦值給另一個，當我們改變另一個數據內部的數據時。第一個也會跟着改變

一、首先對於問題一，官方已經給了很好的解釋。怪就怪在我沒有仔細看文檔吧。記錄一下漲個記性。

<template>
  <div class="hello">
      <ul>
        <li v-for="(item,index) in arr1" :key="index">
          {{item}}
        </li>
      </ul>
      <input type="button" @click="index" value="改變數據">
  </div>
</template>

//以下為script代碼
data () {
    return {
      arr1:['wwwww','hhhhh','aaaaa','ttttt']
    }
  },
  methods:{
    index(){
      // 1.使用數組特定方法。
      // this.arr1.shift();
      // this.arr1.unshift('bbbbb');
      
      // 2.這個方法和之前的差不多。
      //this.arr1.splice(0,1,'bbbbb');

      // 3.使用源生的set方法，但是和splice用法一樣。我看了一下源碼。其實就使用了splice來直接使用了。還不如直接用splice方便些
      this.vm.$set(this.arr1,0,'bbbbb')
      
      console.log(this.arr1);
    }
  }

　　對了 需要注意一下，我使用的是使用vue-cli創建了一個項目直接寫的測試。和網上很多人寫的直接生成vue實例有一些區別的。

　　以上的代碼中，方法3是不能直接使用的。因為不同文件內部調用這個set方法有一些區別的。所以我們需要在外部的main.js內部添加這樣一行代碼

Vue.prototype.vm=Vue.prototype;

　　否則調用會出現問題。

二、對於方法一，我們確實可以使用深克隆等方法去實現該種效果。但是還有一種方便的方法，使用js的序列化。

例如：

<template>
  <div class="hello">
      <ul>
        <li v-for="(item,index) in arr1" :key="index">
          {{item}}
        </li>
      </ul>
      <input type="button" @click="index" value="改變數據">
  </div>
</template>


data () {
    return {
      arr1:{a:'a',b:'b',c:'c'},
      arr2:{}
    }
  },
  methods:{
    index(){
      this.arr2=this.arr1;
      //this.arr2=JSON.parse(JSON.stringify(this.arr1));//序列化
      this.arr2.a='c';
      console.log(this.arr1);
      console.log(this.arr2);
    }
  }

　　通過json.stringify和parse就可以達到這樣的效果，避免修改arr2的時候修改了arr1。