Vue不能检测到Object/Array更新的情况

Vue：不能检测到Object/Array更新的情况

数组索引使用下标更新数组元素；使用赋值方式改变数组长度；使用下标增删数组元素；正文使用下标更新数组元素

data: {
   arrs: [0, 1, 2, 3]
}

直接使用this.arrs[0] = 'zero';虽然数组确实是被更新了，但是更新不会被渲染到视图（html页面）上。因为Vue没有检测到数组的更新。由于 JavaScript 的限制，Vue 不能检测以下变动的数组：当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 官方应对方法：

Vue.set( target, key, value )
Vue.set(this.arrs, 0, 'zero');
vm.items.splice(indexOfItem, 1, newValue)


this.arrs.splice(0, 1, 'zero');

使用赋值方式改变数组长度即this.arrs.length = 100;无效！官方应对方法：

vm.items.splice(newLength)
this.arrs.splice(100);

```j
使用下标增删数组元素 即一下操作无效：
```js
this.arrs[this.arrs.length] = this.arrs.length;

官方应对方法：变异方法。 push() pop() shift() unshift() splice() sort() reverse() this.arrs.push(this.arrs.length);

替换数组(改变引用) 如官方所言：filter(), concat() 和 slice()都是会返回一个新数组

this.arrs = this.arrs.contact(this.arrs.length);
// or
// this.arrs = this.arrs.contact([this.arrs.length]);

官方对性能问题的回应：你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

对象索引增删元素；正文

data: {
  foo: { name: 'isaac' }
}

增删元素

this.foo.job = 'coder';
delete this.foo.name;

如上增删元素是无效的。官方的解决方法：

// 新增
Vue.set(this.foo, 'job', 'coder');

// 删除
Vue.delete(this.foo, 'name');

Vue.delete( target, propertyName/index )

用法：删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它。

对于每次vue可以检测到的数据变动，vue都会重新去渲染整个视图上的变动，整个，注意是整个，并不是说，data里面那个对象或列表的数据变动了，就仅仅更新对应的视图区域，不是这样的，是整个，ok！所以可以利用这一点！具体的做法就是：在修改vue检测不到的数据后，再变动一下vue可以检测到的数据，

# Vue不能检测到Object/Array更新的情况

Vue不能检测到Object/Array更新的情况