VUE中数组更新后，页面没有动态刷新问题

数组变更检测注意事项：

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

1. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

举个例子：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

也就是说，直接设置数组的某一项的值，虽然改变了数组的值，但视图上显示的仍为数组之前的值，数据的响应失效了。出现这种现象的根本原因是什么呢？

首先我们先来了解vue数据响应的原理。官方文档的解释：

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

也就是说当改变data中属性的值时会触发其相应setter的调用，从而实现响应的操作。但getter和setter是有局限性的。我们先来看下面的这个例子：

当该属性的值为一个数组时，通过索引修改数组某一项的值或使用数组的某些方法修改数组并不能触发set；当属性的值为一对象时，直接修改对象中属性的值时也无法触发set。

为了解决当你利用索引直接设置一个数