Vue为什么不能检测到以元素赋值方式的数组变动

起源
研究Vue响应式原理时遇到一个问题，为什么Vue不能检测到以元素赋值方式的数组变动？

Vue的官方文档说：

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

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：

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

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：

vm.$set(vm.items, indexOfItem, newValue)

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

vm.items.splice(newLength)

什么叫“由于 JavaScript 的限制”？这很困扰我，数组也是对象，就不能对数组的项也做劫持么？
思考
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为什么不这样做呢？

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

不仅如此，由于JavaScript的数组是可变的，可以通过 array[index] = value 随时添加数组项，而Object.defineProperty是针对已有项的设置，新加的项是不会被 Object.definePropert设置的，也就不会触发响应了。对象没影响是因为我们在创建Vue实例的时候，data中的属性是预先定义好了的。

所以，所谓的“由于 JavaScript 的限制”，是因为动态添加的数组项不能被劫持而产生响应。

实际上，Vue对数组项的操作方法（pop, push, shifut, unshift, splice, sort, reverse）做了重写，这些方法可以改变数组，而不用管某一具体的数组项了，更加灵活。

总结
Vue不能检测到以元素赋值方式的数组变动是因为：
1、动态添加的数组项不能被劫持生成getter, setter，因此无法产生响应。
2、给数组每一项做劫持，性能低且笨拙。