Vue 数组对象的修改

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

  1. 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如: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"});//同上

添加新评论