this.$set()和Vue.set()本質方法一樣，前者可以用在methods中使用。
在vue裡面，我們操作最多的就是各種資料，在jquery裡面，我們習慣通過下標定向找到資料，然後重新賦值
比如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)" 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>
複製程式碼當我點選按鈕時候，發現沒有任何變化，頁面上還是a,b,c
下面是偉大的vue內建的方法來了
Vue.set() 官方解釋： 設定物件的屬性。如果物件是響應式的，確保屬性被建立後也是響應式的，同時觸發檢視更新。這個方法主要用於避開 Vue 不能檢測屬性被新增的限制。
我的理解就是觸發檢視重新更新一遍，資料動態起來
Vue.set(a,b,c)
a是要更改的資料 b是資料的第幾項 c是更改後的資料
解決上面資料不能更改後的程式碼
<!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)" 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陣列的第一項已經被更改了
