vue 获取数组索引_Vue中对数组特殊的操作

Vue中对数组类型的数组是怎么操作的呢？我们看下Vue源码中的实现

1. 为什么Vue中不能通过索引来修改数组以更新视图

我们知道在Vue中的数据是通过Object.defineProperty这种劫持的方式来实现数据更新的，可是数组是一个比较特殊的类型。官网上说：由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

我搜寻其他的文章里也说是因为大部分浏览器Object.observe()支持的不友好，不能检测很好的检测到数组的数据变化，因此在Vue中则使用了其他的方法来实现数据的更新。

那么我就在想，作者为什么不用Object.defineProperty来实现对数组的数据劫持呢，不能实现的原因是什么呢？我们这里来看个demo：function defArray(obj, key, val){

Object.defineProperty(obj, key, {

get(){

console.log('get val: '+val);

return val;

},

set(newVal){

console.log('old value: '+val);

console.log('new value: '+newVal);

val = newVal;

}

});

}

let arr = [0, 1, 2, 3, 4, 5];

arr.forEach((item, index)=>{

defArray(arr, index, item);

})

arr[1] = 123; // 修改索引为1的值

/*

> arr[1] = 1

old value: 1

new value: 123

123

*/

console.log(arr[2]); // 获取索引为1的数据

/*

> console.log(arr[2]);

get val: 2

2

*/

arr数组的长度为6，修改索引在0-5之间任意索引的数据，都能触发set方法，获取相应的数据时，就能触发get方法。不过当获取额外的数据时，或者先删除原数据再添加时，就不会触发相应的方法了：arr[6] = 6;

console.log(arr[6]); // 6

delete arr[2];

arr[2] = 2;

console.log(arr[2]);

因为上面我们只对已存在的索引的数据进行数据劫持，新添加的数据或者先删除再添加的数据，都是没有get和set方法的，都不能通过数据劫持的方式来更新视图。但数