vue watch 监听数组是否发生改变

在 Vue.js 中，你可以使用 watch 监听数组的变化。但是，要注意的是，如果你直接修改数组中的元素，Vue.js 是无法检测到数组的变化的。因此，你需要使用一些数组变异方法，如 push()、pop()、shift()、unshift()、splice()、sort() 和 reverse()，这些方法会触发 Vue.js 的响应式系统。

下面是一个例子，演示如何使用 watch 监听数组的变化：

new Vue({
  data: {
    list: [1, 2, 3],
  },
  watch: {
    list: function(newVal, oldVal) {
      console.log('list changed:', newVal, oldVal);
    }
  },
  methods: {
    add: function() {
      this.list.push(this.list.length + 1);
    },
    remove: function() {
      this.list.pop();
    },
  }
});

在上面的代码中，我们定义了一个名为 list 的数组，并使用 watch 监听其变化。在 add() 方法中，我们使用 push() 方法向数组中添加一个新的元素。在 remove() 方法中，我们使用 pop() 方法从数组中删除最后一个元素。每当数组发生变化时，watch 中定义的回调函数都会被调用，并传递新的数组和旧的数组作为参数。

需要注意的是，如果你需要监听数组中某个元素的变化，那么你需要使用深度监听，即将 deep 属性设置为 true，如下所示：

new Vue({
  data: {
    list: [{name: 'Tom', age: 20}, {name: 'Jerry', age: 25}],
  },
  watch: {
    list: {
      handler: function(newVal, oldVal) {
        console.log('list changed:', newVal, oldVal);
      },
      deep: true,
    }
  },
  methods: {
    update: function() {
      this.list[0].age++;
    },
  }
});

在上面的代码中，我们定义了一个包含两个对象的数组，并使用 watch 深度监听其变化。在 update() 方法中，我们修改了数组中第一个对象的 age 属性。由于我们将 deep 属性设置为 true，因此 Vue.js 会递归监听数组中所有对象的变化，从而检测到数组的变化