在Vue 中如何监听数组的变化？

在Vue中，可以使用watch来监听数组的变化。但是，如果直接监听数组，只能监听到数组的长度变化，无法监听到数组中元素的变化。要想监听数组中元素的变化，需要使用Vue提供的$set或splice方法来进行修改。

下面是一个监听数组变化的例子：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="addItem">添加</button>
    <button @click="changeItem">修改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['apple', 'banana', 'orange'],
    };
  },
  methods: {
    addItem() {
      this.items.push('pear');
    },
    changeItem() {
      this.items.splice(1, 1, 'watermelon');
    },
  },
  watch: {
    items: {
      handler(newVal, oldVal) {
        console.log('数组变化了', newVal, oldVal);
      },
      deep: true,
    },
  },
};
</script>

在上面的例子中，我们使用watch来监听items数组的变化。我们设置了deep为true，表示深度监听，当items数组中的元素发生变化时，也会触发watch的处理函数。在addItem和changeItem方法中，我们分别通过push和splice方法来修改items数组，从而触发watch的处理函数。