Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

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

用这些方法操作数组的时候是会触发响应式的

下面讨论的是除这些方法外的数组修改

一、Vue数组为什么不是响应式

看官网文档响应式原理 (opens new window) Vue不能检测到以元素赋值方式的数组变动

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

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

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

为了解决第二类问题，你可以使用 splice：

arr.splice(indexOfItem, 1, newValue)

二、为什么不把数组做成响应式

Vue的双向绑定是通过 Object.defineProperty 给对象添加 getter 和 setter 方法实现的。

var data = {
    name: 'Kikky',
    msg: 'hello'
}

// 枚举data里的属性并添加getter setter方法
Object.keys(data).forEach(function(key) {
    Object.defineProperty(data, key, {
        get: function() {
            console.log('trigger subscription')
        },
        set: function() { // 属性变动触发通知
            console.log('trigger notify')
        }
    })
})

data.msg = 'hello world' // 输出 trigger notify

对象可以，那么数组是否也可以呢？试一下

var array = ['a', 'b']

// 枚举数组各项，试图设置各项的getter，setter，
for (var i = 0, len = array.length; i < len ;i++) {
    // 数组的index就相当于对象的属性
    Object.defineProperty(array, i, {
        get: function() {
            console.log('trigger subscription')
        },
        set: function() { // 数组项变动触发通知
            console.log('trigger notify')
        }
    })
}

array[0] = 'x' // // 输出 trigger notify

事实证明，是可以通过 array[index] = newValue 这样的方式触发响应的。Vue自身选择的不对数组进行Object.defineProperty的属性劫持，并不是做不到

那Vue为什么不这样做呢？

1.试想一下，如果数组的长度不是2个，而是 1000 ，1000个，要是每个元素都这样设置一遍，是不是很笨拙，也很损耗性能？

2.不仅如此，由于JavaScript的数组是可变的，可以通过 array[index] = value 随时添加数组项

let arr = [1,2,3]
arr[5] = 100
console.log(arr)  // [ 1, 2, 3, <2 empty items>, 100 ]

如上这样的操作不仅增加了arr[5]，还增加了两个空元素，这对响应式来说是灾难

为什么对象可以？

一般开发中，对象属性多的最多几十个，量级小，而且我们在创建Vue实例的时候，data中的属性是预先定义好了的。Object.defineProperty是针对已有项的设置，新加的项是不会被 Object.definePropert设置的，也就不会触发响应了。

三、触发数组响应式的方法

除了开头重写的js数组方法外

使用Vue.$set(arr, index, value)

Vue.$set(arr, index, value)
vm.$set(arr, index, value)
Vue.set(arr, index, value)

这三个方法的写法不同效果相同，都是调用了set函数，set函数中调用了defineReactive(ob.value, key, val)，手动劫持arr[index]