问题来源：https://segmentfault.com/q/1010000015780995

问题描述：Vue检测数据的变动是通过Object.defineProperty实现的，所以无法监听数组的添加操作是可以理解的，因为是在构造函数中就已经为所有属性做了这个检测绑定操作。

但是官方的原文：由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

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

这句话是什么意思？我测试了下Object.defineProperty是可以通过索引属性来设置属性的访问器属性的，那为何做不了监听？

有些论坛上的人说因为数组长度是可变的，即使长度为5，但是未必有索引4，我就想问问这个答案哪里来的，修改length，新增的元素会被添加到最后，它的值为undefined，通过索引一样可以获取他们的值，怎么就叫做“未必有索引4”了呢？

既然知道数组的长度为何不能遍历所有元素并通过索引这个属性全部添加set和get不就可以同时更新视图了吗？

如果非要说的话，考虑到性能的问题，假设元素内容只有4个有意义的值，但是长度确实1000，我们不可能为1000个元素做检测操作。但是官方说的由于JS限制，我想知道这个限制是什么内容？各位大大帮我解决下这个问题，感谢万分

面对这个问题，我想说的是，首先，长度为1000，但只有4个元素的数组并不一定会影响性能，因为js中对数据的遍历除了for循环还有forEach、map、filter、some等，除了for循环外(for,for...of)，其他的遍历都是对键值的遍历，也就是除了那四个元素外的空位并不会进行遍历(执行回调)，所以也就不会造成性能损耗，因为循环体中没有操作的话，所带来的性能影响可以忽略不计，下面是长度为10000，但只有两个元素的数组分别使用for及forEach遍历的结果：

var arr = [1]; arr[10000] = 1
function a(){
  console.time()
  for(var i = 0;i<arr.length;i++)console.log(1)
  console.timeEnd()
}
a(); //default: 567.1669921875ms
a(); //default: 566.2451171875ms

function b(){
  console.time()
  arr.forEach(item=>{console.log(2)})
  console.timeEnd()
}
b(); //default: 0.81982421875ms
b(); //default: 0.434814453125ms

可以看到结果非常明显,不过，如果for循环中不做操作的话两者速度差不多

其次，我要说的是，我也不知道这个限制是什么 (⇀‸↼‶) ╮( •́ω•̀ )╭

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。数组的索引也是属性，所以我们是可以监听到数组元素的变化的

var arr = [1,2,3,4]
arr.forEach((item,index)=>{
  Object.defineProperty(arr,index,{
    set:function(val){
      console.log('set')
      item = val
    },
    get:function(val){
      console.log('get')
      return item
    }
  })
})
arr[1]; // get 2
arr[1] = 1; // set 1

但是我们新增一个元素，就不会触发监听事件，因为这个新属性我们并没有监听，删除一个属性也是。

再回到题主的问题，既然数组是可以被监听的，那为什么vue不能检测vm.items[indexOfItem] = newValue导致的数组元素改变呢，哪怕这个下标所对应的元素是存在的，且被监听了的？

为了搞清楚这个问题，我用vue的源码测试了下，下面是vue对数据监测的源码：