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