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是没有监听下标赋值的操作也无法监听下面这种是无法监听的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"});//同上