vue -- 数组变化检测

vue有时候在改变了数组的值的时候，视图并不会更新，这时候就需要调用vue变化数组的方法来实现

一、变化数组方法

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

二、替换一个数组

filter()
concat()
slice()

为什么vue数组改变了，视图不变？

Tips

由于 JavaScript 的限制，Vue 无法检测到以下数组变动

1、当你使用索引直接设置一项时，例如 vm.items[indexOfItem] = newValue

2、当你修改数组长度时，例如 vm.items.length = newLength

data: {
    arr: [
        {name: '李狗蛋'},
        {name: '李翠花'}
      ]
}
app.arr[0] = {name: '王二丫'}

展示结果：

现在我们再来改变一下：
```js
Vue.set(app.arr,0,{name: '王二丫'})

展示结果:

李狗蛋

李翠花

发现虽然修改了arr第一项的内容，但是视图并没有像我们所预想的那样跟着改变
#### 如何解决单独改变数组某项值而视图不刷新问题？
### 1、Vue.set()
Vue.set(目标数组,改变项的索引,新值)
```js
王二丫
李翠花

或者利用数组方法splice的替换功能

app.arr.splice(0,1,{name: '丫蛋'})

展示结果：

丫蛋
李翠花

如何解决设置数组长度而视图不刷新问题？

2、splice()

app.arr.splice(1)

展示结果 :

李狗蛋

splice()会删除指定索引及以后的数组项，返回的是为指定索引之前的数组项组成的新数组