前言

在Vue开发中，我们知道Vue的响应式原理是通过Object.defineProperty对数据进行劫持, 并结合发布订阅者模式实现。Vue 利用Object.defineProperty 创建一个 observe 来劫持监听所有的属性，把这些属性全部转为getter 和 setter。Vue 中每个组件实例都会对应一个 watcher 实例，它会在组件渲染的过程中把使用过的数据属性通过 getter 收集为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

但是为什么有时候我们通过索引/下标修改数组里面的元素时候，不是响应式的呢？

根本原因是性能问题（尤雨溪：性能代价和获得的用户体验收益不成正比）*

解决方法 (方法一：splice方法)

使用数组变更/变异 方法 splice。

解决方法 (方法二：this.$set 或 Vue.set)

使用数组变更/变异 方法 splice。

解决方法 (方法三：this.$forceUpdate() )

使用数组this.$forceUpdate() 强制更新方法。