vue中数组变动更新检测

Vue 包含两种观察数组的方法分别如下

　1.变异方法

　　顾名思义，变异方法会改变被这些方法调用的原始数组，它们也将会触发视图更新，这些方法如下

　　　　push()

　　　　pop()

　　　　shift()

　　　　unshift()

　　　　splice()

　　　　sort()

　　　　reverse()

　　　使用举例：example1.items.push({ message: 'Baz' })

　2.非变异方法

　　非变异方法与变异方法的区别就是，非变异方法不会改变原始数组，总是返回一个新数组，

　　当使用非变异方法时，可以用新数组替换旧数组，非变异方法大致有：filter(), concat() 和 slice()

　　使用举例：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

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

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

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

vue针对这两个问题给出了相应的解决办法,使用这两种方法，也会触发状态更新

　1.使用vue全局方法Vue.set() 或者使用vm.$set() 实例方法

　2.使用 splice，caoncat等修改数组

Vue.set用法如下（vm.$set方法是Vue.set的别名，与其用法一致）

　　

总的来说：vue能不能检测到数组的变化并更新，取决于原生js的数组方法，

　　　　　如果原生js方法（vue变异方法）能够修改原数组，那么vue就可以检测到变化并更新（例如push等方法）

　　　　　如果原生js方法（vue非变异方法）不能够修改原数组，而是返回一个新数组，那么vue也可以检测到变化并更新，

　　　　　　　　前提是使用这些方法时要把新数组返回出来去替换掉旧数组

　　　　　至于原生js的数组的两个坑，我们一定到注意，直接利用vue提供的方法来解决