Vue處理數據，數組更新，但視圖無法得到及時更新

我們在項目開發的過程中，經常會遇到這種情況：為data中的某一個對象添加一個屬性，

當我們點擊按鈕，為student添加一個age屬性，看看視圖層是否能夠更新，但發現視圖層並未更新，

由於受JavaScript的限制，vue.js不能監聽對象屬性的添加和刪除，因為在vue組件初始化的過程中，會調用getter和setter方法，所以該屬性必須是存在在data中，視圖層才會響應該數據的變化。

 

兩種解決方法：

1、使用vue語法糖this.$set

//自己的項目
checkon(index){//選擇某一種禮物
      if (this.giftList[index].num == 0) {
            this.giftList[index].num = 1
            this.$set(this.giftList);//修改完this.giftList[index].num ，使用this.$set()使其在視圖層也相應更新。
            // this.$forceUpdate();//也可以，是強制更新，一般不推薦用這種方法。
            this.computprice()
    }
},

2、使用this.$forceUpdate()

但一般不推薦使用這種方法

推薦文章：https://blog.csdn.net/hhkongbai/article/details/101022019        https://www.jianshu.com/p/7412bea4e720