vue数组变异方法

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

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

下面的代码将会作为演示：

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

可以看到，数组连自身元素的修改也无法监听，而原因正是Vue对data方法返回的对象中的元素，将其进行响应式处理的同时，如果元素是数组，则仅仅对数组本身进行响应化，数组内部元素并不与之共命。

那么，有没有破解方法呢？

解决

1. push() 往数组最后面添加一个元素，成功返回当前数组的长度。
2. pop() 删除数组的最后一个元素，成功返回删除元素的值。
3. shift() 删除数组的第一个元素，成功返回删除元素的值。
4. unshift() 往数组最前面添加一个元素，成功返回当前数组的长度。
5. splice() 有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除后想要在原位置替换的值（可选） 。返回删除的数组
6. sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
7. reverse() 将数组倒序，成功返回倒序后的数组。

这个是变异数组

那么什么是变异数组？

变异数组方法：保持数组方法原有功能不变的前提下，对其进行功能拓展。在 Vue 中，这个所谓的功能拓展就是添加响应式功能。