vue中數組或對象在更改后，視圖層不渲染

問題及原因

【問題】
在后端接口返回的對象中再添加一個新的屬性，但是在添加屬性過后。視圖層卻沒有同步更新。
如
data(){
    return{
        demolist:[{name:"Jack",age:15},{name:"Bob",age:12}],
    }
}
methods:{
    demoListDone(){
        this.demolist[0].name="Lucy"    //改變在data中已定義的數據屬性name，視圖層會渲染
        this.demolist[0].weight="50kg"  //在原有對象上添加新屬性weight，視圖層不渲染
    }
}

【原因】
Vue 不能檢測到對象屬性的【添加】或【刪除】。由於 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。
如上，this.demolist[0].name，在頁面初始化時，在data對象上是已存在的，所以它是可響應的
而this.demolist[0].weight，在頁面初始化時，data對象上並未對其做定義，即沒有執行getter/setter 轉化過程，所以該屬性是不響應的。

解決辦法

如上所述，既然我們新添加的屬性沒有得到vue的getter/setter轉化，那么我們可以自己去主動轉化我們所添加的新屬性。

Vue 不允許在已經創建的實例上動態添加新的根級響應式屬性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上：
Vue.set(this.demolist[0], 'weight', '50kg')

我們還可以使用 vm.$set 實例方法，這也是全局 Vue.set 方法的別名：
this.$set(this.demolist[0], 'weight', '50kg')

拓展 --- 如果你還不懂，或者想了解更多：

• 直接看vue官方文檔體驗會更好：https://cn.vuejs.org/v2/guide/reactivity.html
• 看看博客解析也不錯：https://www.cnblogs.com/thinkingthigh/p/7789108.html