vue检测不到data里数组里面元素的变化

当前遇到的问题是：

  当我们改变data中数组里面是某一个元素，视图不进行更新

带着解决这个问题，我们首先来到了vue官方文档：

当使用上面的方法对数组进行操作的时候，就会触发视图更新

但是现在问题假如我们并不是用这些方法对数组进行操作
例如：

	data(){
		return{
			arr:[1,2,3]
		}
   }
   ...
  this.arr[0] = 10

那么我们就要深入vue的响应式原理了

1. 当我们在data选项中添加一些对象时
   2

我们可以观察到 vue 将对象里的每个属性添加了Getter 和 Setter，

那么接下来就进入解决标题问题的环节了：

当我们直接通过索引改变数组里面的元素时，此时Vue是检测不到的，
所以我们可以通过

Vue.set(vm.items, indexOfItem, newValue)

也可以使用

vm.$set(vm.items, indexOfItem, newValue)

上面两种作用其实是一样的，但是这种强制添加进去并不推荐，会降低性能。
所以在这里我们推荐下面一种：

vm.items.splice(newLength)

刚刚上面有说到利用splice对数组进行操作，vue是可以检测到的！！

上面聊的都是比较简单的情况，当我们遇到多重嵌套的时候，我们可以试一试下面这个方法：

this.$forceUpdate()会更新视图和数据，触发updated生命周期