vue2中监听数组变化的方法

在Vue2的开发中，经常会遇到需要监听数组变化的场景，以便在数组元素发生改变时执行相应的操作。下面将介绍几种常见的监听数组变化的方法。

一、Vue的响应式原理与数组监听

Vue2通过Object.defineProperty()方法来进行数据劫持，实现数据的响应式。但对于数组，由于其特殊的性质，Vue2做了一些特殊处理。Vue2能够监听到数组的部分方法调用，比如push()、pop()、shift()、unshift()、splice()、sort()和reverse()，当使用这些方法修改数组时，Vue会自动更新视图。

二、使用$watch监听数组

$watch是Vue实例提供的一个方法，用于监听数据的变化。要监听数组的变化，可以在Vue组件的created或mounted钩子函数中使用$watch来监听数组。示例代码如下：

<template>
  <div>
    <ul>
      <li v-for="item in arr" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3]
    };
  },
  mounted() {
    this.$watch('arr', (newVal, oldVal) => {
      console.log('数组变化了', newVal, oldVal);
    }, {
      deep: true
    });
  }
};
</script>

这里的deep: true表示深度监听，能够监听到数组内部元素的变化。

三、使用计算属性监听数组

计算属性可以根据依赖的数据动态计算出一个新的值。通过计算属性来监听数组变化，可以在计算属性的getter函数中进行相关逻辑处理。示例代码如下：

<template>
  <div>
    <p>{{ computedArr }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3]
    };
  },
  computed: {
    computedArr() {
      console.log('数组变化了');
      return this.arr.join(',');
    }
  }
};
</script>

当数组arr发生变化时，计算属性computedArr会重新计算，从而触发相关逻辑。

在Vue2中监听数组变化有多种方法，开发者可以根据具体的业务需求选择合适的方式来实现。