面试题：Vue中如何正确监听数组变化

Question

在Vue项目里，有一个数组data: ['a', 'b', 'c']，请描述如何使用Vue侦听器（watch）来监听这个数组的变化，并且当数组元素新增、删除或修改时都能正确捕获到变化并执行相应操作。

Answer 1

在Vue项目中，可以通过以下方式使用watch监听数组变化：

<template>
  <div>
    <button @click="addElement">添加元素</button>
    <button @click="removeElement">删除元素</button>
    <button @click="modifyElement">修改元素</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: ['a', 'b', 'c']
    };
  },
  watch: {
    data: {
      handler(newVal, oldVal) {
        console.log('数组发生变化，新值：', newVal, '旧值：', oldVal);
        // 在这里执行相应操作
      },
      deep: true // 深度监听，用于捕获数组内元素的变化
    }
  },
  methods: {
    addElement() {
      this.data.push('d');
    },
    removeElement() {
      this.data.pop();
    },
    modifyElement() {
      this.data[0] = 'x';
    }
  }
};
</script>

上述代码中，通过watch监听data数组，设置deep: true确保能够捕获数组内部元素的新增、删除和修改变化，在handler函数中可以执行相应操作。