vue解决数组改变而视图不改变的问题

问题描述：

      做vue项目的过程中会遇到一个问题，就是我更新了数据，但是视图数据的展示并没有立即更新，针对这个问题下面给出两个方法来进行解决。

比如，我们往数组每一条数据对象里面添加一个属性，数据其实添加上了，但是视图里面并没有显示出来。

 anomalyReportList:[
     {content:'沸石转轮健康诊断--颗粒物浓度过高',time:'2021-10-08'},
     {content:'沸石转轮健康诊断--颗粒物浓度过高',time:'2021-10-08'},
     {content:'沸石转轮健康诊断--颗粒物浓度过高',time:'2021-10-08'},
 ]


//下面是给每条数据增加一个属性
test(){
    this.anomalyReportList.forEach((item,index)=>{
        item.status='检测中'
    })
},

如上，给anomalyReportList数组里面的每条数据添加了一个属性status，虽然属性的值已经添加上了，但是在数组里面并没有显示出来。

这主要是因为，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

所以我们可以用下面的办法解决这个问题。

问题解决：

方法一：

vue里面给我们提供了$set方法，目前vue2.0的用法是：this.$set(this.data,”key”,value’)

所以我们可以这样处理数组：

this.anomalyReportList.forEach((item,index)=>{
    this.$set(item,"status", '检测中')
})

这样我们增加了一个status属性，并且视图能及时的更新过来

方法二：

通过map数组方法，对数组里面的每条数据进行重新处理，将返回的新的数组重新赋值给当前的数组。这等于是重新给这个数组变量赋值了，vue那边能监听到并且实时更新视图了

数组处理方法如下：

this.anomalyReportList=this.anomalyReportList.map((item,index)=>{
    item.status="检测中" 
    return item
})

最后：

其实刚开始的时候，我主要考虑的是$set和$forceUpdate方法来解决数据更新视图不更新的问题，但是在解决的过程中发现$forceUpdate对数组来说不是很好使。

下一步还是需要继续研究一下以上数组修改的方法那个效率更高一点