关于vue中如何监听数组变化

在Vue中，如何监听数组变化，可以通过Vue提供的一些方法或者使用第三方库来实现。下面是几种常用的方法。

使用Vue提供的$watch和$set方法

Vue提供了$watch和$set方法来监听数组的变化。

$watch

$watch可以监听数组的长度变化、数组中某个元素的值的变化以及数组中元素的增删变化。下面是一个示例：

// 定义一个数组
let items = [];

// 监听items数组变化
new Vue({
  data: {
    items: items
  },
  created() {
    this.$watch('items', (newVal, oldVal) => {
      console.log(newVal, oldVal);
    })
  }
})

// 在数组中添加一个元素
items.push('item1');

在上面的示例中，我们定义了一个空数组items，然后在Vue实例中使用$watch方法监听items数组的变化。在数组中添加元素后，$watch方法中的回调函数会被触发并打印出新值和旧值。

$set

$set可以向数组中添加新元素，并触发监听该数组的函数。下面是一个示例：

// 定义一个Vue实例
new Vue({
  data: {
    items: []
  },
  created() {
    this.items.$watch('length', (newVal, oldVal) => {
      console.log(newVal, oldVal);
    })
  }
})

// 向数组中添加一个元素
this.items.$set(this.items, 0, 'item1');

在上面的示例中，我们定义了一个空数组items，然后在Vue实例中使用$watch方法监听items数组的长度变化。在用$set向数组中添加元素后，$watch方法中的回调函数会被触发并打印出新值和旧值。

使用第三方库vue-watch-array

除了使用Vue自带的方法外，还可以使用第三方库vue-watch-array来监听数组的变化。下面是一个示例：

<!-- 引入vue-watch-array库文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue-watch-array"></script>

<!-- 定义一个vue实例 -->
<div id="app">
  <p v-for="item in items">{{item}}</p>
</div>

<script>
  // 创建Vue实例
  new Vue({
    el: '#app',
    data: {
      items: ['item1', 'item2', 'item3']
    },
    watchArray: {
      items: function(newVal, oldVal) {
        console.log(newVal, oldVal);
      }
    }
  });
</script>

在上面的示例中，我们使用了第三方库vue-watch-array来监听数组的变化。在数组中添加、删除和修改元素时，watchArray属性中的回调函数会被触发并输出新值和旧值。

除了上述方法，还可以通过自定义指令或者使用vuex插件来监听数组的变化。但无论使用哪种方法，我们都应该注意防止数组的异变，避免在不知情的情况下改变了数据的值，导致界面不符合预期。