vue 数组对象的修改

Question

根据vue官方文档，直接修改数组的值，将无法更改view层，可以使用$set来实现。那么数组内的对象如何修改呢，是使用$set来修改，还是直接使用数组下标的方式修改。
为什么我现在直接使用数组下标的方式修改也能触发view更新呢？

Answer 1

文档中提到了这几点：

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

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

其中你的疑问是第一点吧？文档的意思是比如现在有一个数组arr，内容是[1,2,3]，然后你想要加多一项，然后arr[3] = 4，这个时候Vue是检测不到的，而且arr[0] = 666也不行。数组内的对象的内容只要一开始添加了，就可以直接arr[index].key = val这样改，如果是一开始没有添加，那就要用$set添加。至于你说的可以监听到，可以发一个demo看一下

Answer 2

vue是没有监听下标赋值的操作也无法监听
下面这种是无法监听的

var arr = ["a","b"];
arr[1] = "bbbb";

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[1].text = "bbbbb";//利用对象的监听
this.arr = ["a",{text:"bbbbb"}];//同上
this.arr.splice(1, 1, {text:"bbbbb"});//数组的监听
this.$set(this.arr,1,{text:"bbbbb"});//同上

Answer 3

用this.$set修改后的数组，能用console打印出来，但是不能用下标访问，返回的是undefined，这是为什么呢