数组对象跟新vue2响应式失效

在Vue.js 2.x中，Vue的核心是其依赖收集系统，它通过`data`选项和`watch`属性来创建响应式数据。数组作为复杂的数据结构，当它们的对象直接或间接地发生变化时，Vue才能感知并更新视图。

然而，如果你在一个已声明为响应式的数组内部直接修改数组元素（如替换整个元素或深度修改），这可能导致响应式系统的失效。原因在于，Vue并不跟踪对数组底层原始数据的改变，而是假设数组自身是不可变的。当你直接操作数组元素，Vue不会自动检测到这个变化。

对于这种情况，有几种解决办法：

1. 使用`this.$set`方法：Vue提供了一个专门处理这种情况的方法`$set`，它可以确保数组响应式，并追踪添加、删除和更新元素的操作。例如：

this.array = this.$set(this.array, index, newValue);

2. 修改数组时使用`map`, `filter`, 或 `findIndex`等方法：这些方法会返回一个新的数组，而不会影响原数组，Vue可以监控新数组的变化。
3. 对象浅拷贝后再修改：如果只是简单地想替换一个元素，你可以先复制整个数组，然后替换新的元素，再设置回Vue实例。