$set——vue中資料更新，視圖不更新的情況探讨

很早之前就知道this.$set可以解決vue中資料更新視圖不更新的問題，但是對于什麼情況下才會造成視圖不更新一直很模糊，今天就來确認一下什麼情況會造成視圖不更新。

vue官網中對此的解釋是：

需要注意的問題是，以下變動的數組中，vue是不能檢測到的，也不會觸發視圖更新：

• 通過索引直接設定項，比如： app.books[2] = {...}
• 修改數組長度，比如：app.books.length = 2

通過測試發現對于純數組來說，直接通過索引值的方式确實不能更新視圖，要使用 this.$set(this.arr, 2, 'shuzu5') 這種方式來更新。

對于對象數組的已有屬性來說，直接通過‘索引值.屬性’的方式修改已有資料是可以更新視圖的，比如：

this.obj[2].name = 'hahah'
           

但是，對于給數組中某個對象新增一個屬性更新了資料的話，是不會更新到視圖上的，比如：

this.obj[2].newProperty = 'hahah'
// 列印出來對象發現該對象的其他值在私有方法中都有get/set方法，但是新增的屬性newProperty卻沒有get/set方法，使用$set後就有了。
           

以及直接更新某個索引值的整個對象也不會觸發視圖更新，比如：

this.obj[2] = {
    name: 'luck',
    value: '300'
}
           

map周遊雖然沒有索引值的表現，但實際上還是通過索引值來進行操作的，新增屬性同樣不會觸發試圖更新，比如：

arr.map( item => {
    item.newProperty = ' hahah'
}