前端vue3watch数组

在Vue 3中，你可以使用`watch` API来监视数组的变化。当你想要监视数组元素的变化而不是数组本身的变化时，你可以使用`watchEffect` API。

以下是一个使用`watch` API监视数组变化的示例：

import { watch } from 'vue';

export default {
  data() {
    return {
      arr: [1, 2, 3],
    };
  },
  created() {
    watch(() => this.arr, (newValue, oldValue) => {
      console.log('Array changed:', newValue, oldValue);
    });
  },
};

在上面的示例中，我们使用`watch` API来监视`arr`数组的变化，并在控制台打印出新旧值。

如果你想要监视数组元素的变化，可以使用`watchEffect` API：

import { watchEffect } from 'vue';

export default {
  data() {
    return {
      arr: [1, 2, 3],
    };
  },
  created() {
    watchEffect(() => {
      this.arr.forEach((item) => {
        console.log('Array item changed:', item);
      });
    });
  },
};

在上面的示例中，我们使用`watchEffect` API来监视`arr`数组中每个元素的变化，并在控制台打印出变化的元素。