Vue.set()實現(xiàn)數(shù)據(jù)動態(tài)響應的方法

更新時間：2018年02月07日 11:49:00 作者：不負好時光

這篇文章主要介紹了Vue.set()實現(xiàn)數(shù)據(jù)動態(tài)響應的相關知識，非常不錯，具有參考借鑒價值,需要的朋友可以參考下

在vue里面，我們操作最多的就是各種數(shù)據(jù)，在jquery里面，我們習慣通過下標定向找到數(shù)據(jù)，然后重新賦值

比如var a[0]=111;（希望上家公司原諒菜鳥的我寫了不少這樣的代碼😁）

下面上代碼

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="./js/vue.min.js"></script>
</head>
<body>
  <div id="app">
     <ul>
       <li v-for="item in listData">{{item}}</li>
    </ul>
    <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" v-text="he" @click="changeData()"></a>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      he:"點我",
      listData:["a","b","c"]
     },
    methods:{
       changeData () {
         this.listData[0]="d";
       }
      }
  })
</script>
</html>

當我點擊按鈕時候，發(fā)現(xiàn)沒有任何變化，頁面上還是a,b,c

輸入圖片說明

vue當然不會這么菜呢

下面是偉大的vue內置的方法來了

Vue.set() 官方解釋：設置對象的屬性。如果對象是響應式的，確保屬性被創(chuàng)建后也是響應式的，同時觸發(fā)視圖更新。這個方法主要用于避開 Vue 不能檢測屬性被添加的限制。

我的理解就是觸發(fā)視圖重新更新一遍，數(shù)據(jù)動態(tài)起來

Vue.set(a,b,c)

a是要更改的數(shù)據(jù) b是數(shù)據(jù)的第幾項 c是更改后的數(shù)據(jù)

解決上面數(shù)據(jù)不能更改后的代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="./js/vue.min.js"></script>
</head>
<body>
  <div id="app">
     <ul>
       <li v-for="item in listData">{{item}}</li>
    </ul>
    <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" v-text="he" @click="changeData()"></a>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      he:"點我",
      listData:["a","b","c"]
     },
    methods:{
       changeData () {
         Vue.set(this.listData,0,'X')
       }
      }
  })
</script>
</html>

我們可以看到，this.listData數(shù)組的第一項已經(jīng)被更改了

輸入圖片說明