vue中如何监听数组的变化

在 Vue 中，可以使用 `watch` 或 `$watch` 来监听数组的变化。但是，由于 JavaScript 中的数组是一种引用类型，所以监听数组变化的方法与监听对象的变化有所不同。

当数组的长度发生变化时，Vue 会自动检测到这种变化。但是，当修改数组中元素的值时，Vue 并不能自动检测到这种变化，需要使用特殊的方法来实现监听。

以下是几种监听数组变化的方法：

1. 使用 watch 监听数组

watch: {
  myArray: function(newVal, oldVal) {
    console.log('数组发生了变化', newVal, oldVal);
  }
}

2. 使用 $watch 监听数组

this.$watch('myArray', function(newVal, oldVal) {
  console.log('数组发生了变化', newVal, oldVal);
});

3. 使用 Vue.set 或 Vue.delete 方法修改数组元素

Vue.set(this.myArray, index, newValue); // 修改指定下标的元素
Vue.delete(this.myArray, index); // 删除指定下标的元素

4. 使用数组的变异方法

Vue 支持一些特殊的数组变异方法，例如 `push`、`pop`、`shift`、`unshift`、`splice`、`sort` 和 `reverse`。这些方法可以直接修改数组并触发视图更新。

this.myArray.push(newValue); // 添加元素
this.myArray.pop(); // 删除最后一个元素
this.myArray.splice(index, 1); // 删除指定下标的元素

需要注意的是，Vue 不支持使用索引直接设置数组元素的值，例如 `this.myArray[index] = newValue`。如果要修改数组中的元素，必须使用 Vue.set 或 Vue.delete 方法，或者使用变异方法。