关于Vue 监控数组的问题

关于Vue 监控数组的问题，我们可以通过 Vue 中的 computed 属性和 watch 属性来完成监控数组的操作。

监听数据的变化

Vue 提供了一种方法，以便自动跟踪数组的变化。这个方法是使用 Vue.set 或者是修改数组的长度来改变数组变化。在这个方法之后，组件会自动地更新记录数组。在实际应用中，我们常常使用 Array.push()、Array.pop()、Array.shift()、Array.unshift()、Array.splice() 或者 Array.sort() 等方法来改变数组，这种方法并不能被 Vue 自动监听到数组的变化。

使用 computed 属性

我们可以使用 computed 属性来监听数组的变化。在组件的计算属性计算时，我们可以在计算属性中使用 JavaScript 的 slice 方法来复制一个新的数组，这样就可以让 Vue 监听到数组变化。

<template>
  <div>{{ newItems }}</div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5],
    };
  },
  computed: {
    newItems() {
      return this.items.slice();
    },
  },
};
</script>

在上面这个示例中，computed 属性通过 slice 方法复制了一个新的数组 newItems 。当你使用一些方法（例如 push，pop，shift，splice）去修改 items 数组的时候，Vue 就会监听到 computed 属性的变化，从而自动更新数据。

使用 watch 属性

除了使用 computed 属性，也可以使用 watch 属性来监听数组的变化。watch 属性可以通过 $watch 方法来监听数据变化，当数组发生变化时，我们可以在此方法中手动触发页面刷新。

<template>
  <div>{{ items }}</div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5],
    };
  },
  watch: {
    items() {
      this.$nextTick(() => {
        // do something
      });
    },
  },
};
</script>

在这个示例中，我们使用 watch 属性来监听 items 数组的变化。当数组发生变化时，我们在 watch 方法中后执行一些操作。需要注意的是，在 watch 方法中修改数据，会导致死循环。我们可以使用 $nextTick 方法将其异步化。

给数组添加属性

当我们给数组添加属性时，Vue 会自动完成监控操作。在上面的示例中，如果我们在 computed 中调用 items[0]，那么Vue就会监控到该属性的变化，并且自动更新数据。如果我们要给该数组添加新的属性，Vue 也会自动完成监控操作。

下面是一个示例：

<template>
  <div>{{ items[0] }} {{ items.newProp }}</div>
</template>

<script>
export default {
  data() {
    return {
      items: [{ name: "Tom" }, { name: "Jerry" }],
    };
  },
  computed: {
    newItems() {
      return this.items.slice();
    },
  },
  mounted() {
    this.items.forEach((item, index) => {
      // 特别注意必须使用Vue.set来设置响应式属性
      this.$set(this.items[index], "newProp", "Vue");
    });
  },
};
</script>

在这个示例中，我们在 items 数组中为每一个对象添加一个属性 newProp。在给数组添加属性时，需要使用 $set 方法。在 $set 方法中，第一个参数表示要添加属性的对象，第二个参数表示要添加的属性的名称，第三个参数表示要添加的属性的值。这里的 newProp 就是我们要添加的属性名称，而 Vue 就是我们要添加的属性值。