vue通过 API 监听数组的变化

想要通过 API 监听 Vue.js 中的数组变化，可以使用 Vue 提供的 $watch 和 Vue.set 方法。

1. 使用 $watch 监听数组变化

在 Vue.js 中，可以通过 $watch 方法来监听数组变化。具体步骤如下：

1. 在组件或实例中声明一个数组，例如：

js
data() {
return {
list: ["a", "b", "c"]
}
}

1. 在 mounted 生命周期中使用 $watch 方法来监听数组变化，例如：

js
mounted() {
this.$watch("list", function(newVal, oldVal) {
console.log("数组变化了：", newVal, oldVal);
}, { deep: true });
}

在这个示例中，$watch 方法的第一个参数是要监听的属性名 "list"，第二个参数是变化后的回调函数，其中 newVal 表示新值，oldVal 表示旧值。还要注意，数组的变化只有通过 Vue.js API 进行的操作才会触发监听，直接通过索引值修改数组不会被 Vue.js 监听到。

2. 使用 Vue.set 方法监听数组变化

另一种方法是使用 Vue.set 或 this.$set 方法来监听数组变化。Vue.set 方法可以在 Vue.js 应用程序中添加新属性或修改现有属性。

mounted() {
  Vue.set(this.list, 1, "X");
},

在这个示例中，Vue.set 方法的第一个参数是要修改的数组，第二个参数是要修改的数组下标，第三个参数是要修改成的新值。这种方法的优点是，也可以监听数组的变化。

以下是一个完整的示例：

<template>
  <div>
    <h3>监听数组变化：</h3>
    <div>{{ list }}</div>
    <button @click="add">添加元素</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["a", "b", "c"],
      index: 4
    }
  },
  mounted() {
    this.$watch("list", function(newVal, oldVal) {
      console.log("数组变化了：", newVal, oldVal);
    }, { deep: true });
  },
  methods: {
    add() {
      this.$set(this.list, this.index, "d");
      this.index++;
    },
  },
}
</script>

在这个示例中，每次点击按钮都会向数组中添加一个新元素。使用 $watch 方法监听数组变化，可以在控制台中看到数组变化的情况。