vue 数组对象的修改

Question

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

Answer 1

文档中提到了这几点：
由于JavaScript的限制，Vue不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem]=newValue
当你修改数组的长度时，例如：vm.items.length=newLength
其中你的疑问是第一点吧？文档的意思是比如现在有一个数组arr，内容是[1,2,3]，然后你想要加多一项，然后arr[3]=4，这个时候Vue是检测不到的，而且arr[0]=666也不行。数组内的对象的内容只要一开始添加了，就可以直接arr[index].key=val这样改，如果是一开始没有添加，那就要用$set添加。至于你说的可以监听到，可以发一个demo看一下
                            

Answer 2

vue是没有监听下标赋值的操作也无法监听下面这种是无法监听的
vararr=["a","b"];
arr[1]="bbbb";
vue只监听了'push','pop','shift','unshift','splice','sort','reverse'等直接改变原数组的方法而$set，内部还是splice方法
functionset(target,key,val){
if(Array.isArray(target)&&typeofkey==='number'){
target.length=Math.max(target.length,key);
target.splice(key,1,val);
returnval
}
//其他操作
...
}
但是如果你的结构下面：
vararr=["a",{text:"b"}];
arr[1].text="bbbbb";
因为对数据进行了递归对象的赋值是可以直接监听到的但是下面又不行了
vararr=["a",{text:"b"}];
arr[1]={text:"bbbbb"};
总结来说不要数组下标直接赋值
vararr=["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"});//同上