Vue 数组对象的修改
AI摘要:Vue无法检测通过索引直接设置数组项或修改数组长度的变动。Vue只监听push、pop等改变原数组的方法,$set内部也使用splice实现。可直接修改数组中对象的属性,但不能直接替换数组中的对象。应使用对象监听、替换整个数组、splice或$set等方法正确修改数组。
由于 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"});//同上