Vue数组和对象的视图更新问题

数据改变但视图却没有更新

这里分两种情况

一、数据为数组时：

例如你的data里有一段这样的数组

arrData:[1,2,3,4,5]

这时你要添加新的数据，如果在方法里直接这样写，数据确实改了，但视图并不会更新

this.arrData[5]=6

解决方法1、

改成使用数组方法

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

this.arrData.push(6);

同样的，如果是修改、删除操作也是像原生js一样使用数组方法就行了，但是要注意这里其实已经已经不是原生的方法了，是经过Vue封装后的方法，所以可以响应式更新视图

解决方法2、

使用Vue的静态方法

Vue.set(this.arrData,5,6);

这个方法可以添加，也可以修改。不过数组操作的话，个人比较推荐上一种方法。

解决方法3、‘

给整个数组重新赋值

二、数据为对象时：

数据为对象时，一般修改是可以正常更新的，但如果是添加的话就得注意了：

直接使用 对象.属性="值" 这种形式添加属性是不行的。而且这种方法添加的属性没有getter和setter，之后就算这个属性改变，视图也不会更新。

解决方法1、：

使用Vue的静态方法 Vue.set(对象,下标,值)

解决方法2、

给整个对象重新赋值（不推荐）