为何vue不能检测通过索引设置数组的某一项？

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

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

首先我测试了下Object.defineProperty是可以通过索引属性来设置属性的访问器属性的：

var arr = [1,2,3];
var initValue = 99;
Object.defineProperty(arr,"2",{
    get:function (){
        //当获取值的时候触发的函数
        return initValue;    
    },
    set:function (value){
        //当设置值的时候触发的函数,设置的新值通过参数value拿到
        console.log('set: ', value);
        initValue = value;
    }
});
//获取值
console.log( arr[2] );  //hello

//设置值
arr[2] = 88;

console.log( arr[2] ); //change value

arr.push(4);

console.log( arr[2] ); //change value

console.log('arr: ', arr);

展开前	展开后
image.png	image.png

• 将鼠标悬浮于三个点上时，会提示 The property is computed with getter

既然如此，那为何做不了监听？
原因很简单：性能问题，性能的代价和用户体验收益不成正比。

参考 记一次思否问答的问题思考：Vue为什么不能检测数组变动