Vue2中无法检测到数组变动的原因及解决

当我们使用 Vue2 中的响应式系统时，可以通过 Vue.set 或者直接修改一个数组中的元素来触发视图的更新。但是，如果我们使用数组的方法（比如 push、pop、shift、unshift、splice、sort 或者 reverse）去修改数组，Vue2 中是无法直接检测到数组变动的，这是因为 Vue2 的响应式系统是通过 Object.defineProperty 来实现的，这个方法无法劫持数组的变动。

要解决这个问题，我们可以手动触发数组变动的通知。Vue2 提供了一个 $set 方法来实现这个功能。这个方法有两个参数，第一个是要修改的数组对象，第二个是要修改的数组下标。

以下是一个示例，假设我们有一个数据 list，想要在列表的末尾追加一个新的元素：

// data
data() {
  return {
    list: ['item1', 'item2', 'item3']
  };
}

// 在方法中使用push方法改变数组
methods: {
  addItem() {
    this.list.push('item4');
  }
}

上述代码可以成功将新的元素添加到数组中，但是视图并不会立刻更新。为了解决这个问题，我们可以使用 Vue2 提供的 $set 方法来通知视图更新，具体实现如下：

methods: {
  addItem() {
    this.$set(this.list, this.list.length, 'item4');
  }
}

在 $set 方法中，第一个参数是要修改的数组对象，第二个参数是要修改的元素下标（也可以传递一个字符串类型的下标，比如 this.$set(this.list, '3', 'item4')），第三个参数是要替换的新元素。

除了使用 $set 方法外，我们还可以使用 splice 方法去实现增、删、改的操作，这个方法可以在修改数组的同时触发通知，具体实现如下：

methods: {
  addItem() {
    this.list.splice(this.list.length, 0, 'item4');
  }
}

上述代码中，第一个参数是要增加的元素下标，第二个参数是要删除的元素个数，第三个参数是要添加的新元素。

总之，如果我们需要使用数组方法去修改一个数组对象，我们需要注意到 Vue2 无法直接检测到数组变化，需要手动触发更新，可以使用 $set 或者 splice 方法来实现。