vue中数组（或对象）改变不会刷新实体

一、原因

官方的原文：由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

数组：Vue 中是通过对 每个键设置 getter/setter 来实现响应式的，开发者使用数组，目的往往是遍历，此时调用 getter 开销太大了，所以 Vue 不在数组每个键上设置，而是在数组上定义 ob ，并且替换了 push 等等能够影响原数组的原型方法。
vue 里data里的数组的每一项在初始化时没有被设置getter和setter，所以不能监控利用索引直接设置一个项。

对象属性添加和删除：Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

二、解决方法：

1、方案一：

// 对象
this.$set(this.object, key, value);
// 数组
this.$set(this.arr, index, newVal)；

2、方案二：

// 对象：
this.obj = Object.assign({},this.obj,{"sex","man"})；
// 数组： 
const newArr = this.arr;
arr[index] = newVal;
this.arr = Array.concat([], newArr);

3、方案三：

// 数组，使用被替换过的能影响原数组的原型方法
push()
pop()
shift()
unshift()
splice()  //注意长度会变化
sort()
reverse()