Vue 数组对象的修改
由于 JavaScript
的限制,Vue
不能检测以下变动的数组:
- 当你利用索引直接设置一个项时,例如:
vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如:
vm.items.length = newLength
vue
只监听了push
,pop
,shift
,unshift
,splice
,sort
,reverse
等直接改变原数组的方法
而$set
,内部还是splice
方法
function set(target, key, val) {
if (Array.isArray(target) && typeof key === 'number') {
target.length = Math.max(target.length, key);
target.splice(key, 1, val);
return val
}
//其他操作
...
}
但是如果你的结构下面:
var arr = ["a",{text:"b"}];
arr[1].text = "bbbbb";
因为对数据进行了递归 对象的赋值是可以直接监听到的
但是下面又不行了:
var arr = ["a",{text:"b"}];
arr[1] = {text:"bbbbb"};
总结来说不要数组下标直接赋值
var arr = ["a",{text:"b"}];
this.arr[1].text = "bbbbb";//利用对象的监听
this.arr = ["a",{text:"bbbbb"}];//同上
this.arr.splice(1, 1, {text:"bbbbb"});//数组的监听
this.$set(this.arr,1,{text:"bbbbb"});//同上