有兩種情況變動的數組，是VUE不能檢測到的，也不會觸發視圖的更新。
- 通過索引直接設置項
- 修改數組的長度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src = "https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<h2>數組更新</h2>
<ul>
<li v-for="(item, index) in items" :key="index">{{item.name}}</li>
</ul>
<button @click="btnClick">通過索引直接設置項</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
items: [
{name: 'qqqqqqqqqq'},
{name: 'wwwwwwwwww'},
{name: 'eeeeeeeeee'}
]
},
methods: {
btnClick() {
// this.items[0] = {name: '改變數組第一個值'}
this.items.push({name: '11111111111111111111111'})
}
}
})
</script>
</body>
</html>
這里，我想說的是第30行，注釋那行，我正在驗證數組變異的方法，所以30行和31行同時寫上的，居然可以利用數組索引直接設置項，然后我就why?教程里說好的不能這樣做的。。。
后面注釋了第31行，才沒有設置成功的。這里，使用push()方法，改變數組也會觸發視圖更新，所以才導致了this.items[0] = {name: '改變數組第一個值'}這么做也能成功。
以上，說明了我自己挖的這個坑的原因，那么，該怎么解決vue不能檢測到通過索引直接設置項的問題呢，如下：
第一種方法：
btnClick() {
this.$set(this.items, 0, {
name: '通過this.$set去改變值'
}
}
第二種方法：
btnClick() {
this.items.splice(0, 1, {
name: '通過splice去改變值'
}
}
第三種方法：
btnClick() {
this.items[0].name = '改變數組第一個值'
}
那么，文章開頭說的vue不能檢測到修改數組長度，辦法呢是用第二種中的splice()來解決。