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"});//同上