vue中是怎样监听数组变化的

Vue中如何监听数组变化是一个非常常见的问题，下文将详细讲解如何监听和响应数组变化。

Vue2.x版本中数组的响应式原理

Vue2.x版本中采用了 Object.defineProperty 方法来实现数组的响应式，Vue将数组的一些修改原生方法（比如push、pop、shift等）进行了覆盖，使之成为可观测的。Vue 内部为每个数组设置了一个原型对象，继承自Array.prototype，然后对数组中的一些方法进行重新定义，当调用这些方法时，会发出响应式更新的消息。

但是，如果我们使用以下原生方法修改数组，Vue是无法检测到这些修改的：

• 直接通过下标修改数组元素
• 通过数组长度修改数组
• 通过索引赋值为对象或数组。

我们需要使用 Vue 提供的非变异方法（不改变原数组的方法），比如 Array.prototype.slice()、 Array.prototype.concat() 或 ES6 中的扩展运算符来生成一个新的数组，从而实现数组的响应式更新。

如果无法使用非变异方法，我们也可以手动调用 Vue 提供的 $set 方法，来通知 Vue 进行响应式的更新。

另外，Vue3.x版本中则使用了原生 Proxy API 监听数据的变化，更加高效和灵活。

监听数组变化的两种方法

监听数组的 push 和 pop 操作

在Vue中，我们可以通过给数组绑定watcher监听数组的变化，方法如下：

1. 以组件中 data 属性为 arr 的数组为例

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3]
    }
  },

  watch: {
    // 监听 arr 的变化（push 和 pop 操作）
    arr: function(newValue, oldValue) {
      console.log('数组变了', newValue, oldValue);
    }
  }
}
</script>

当我们执行 this.arr.push(4) 和 this.arr.pop() 操作时，控制台将会打印出以下返回值：

数组变了 [1, 2, 3, 4] [1, 2, 3]
数组变了 [1, 2] [1, 2, 3, 4]

1. 使用Vue的观察者模式

可以使用Vue的 $watch 监听某一个数组的长度变化。

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3]
    }
  },

  methods: {
    add() {
      this.arr.push(4)
    },
    remove() {
      this.arr.pop()
    },
    // 监听数组长度的变化
    $watch: {
      arr: function(value, oldValue) {
        console.log(value, oldValue, 'length changed');
      },
      immediate: true // 存在，现在就监听
    }
  }
}
</script>

当我们执行 this.add() 和 this.remove() 操作时，控制台将会打印出以下返回值：

[1, 2, 3, 4] [1, 2, 3] length changed
[1, 2, 3] [1, 2, 3, 4] length changed

通过这两个实例，可以清楚地了解到，在 Vue 中监听数组可以使用 Watcher 或 直接监听数组长度变化，在后续的开发中，可以尝试采用这两种方法监听数组变化，以达到最优的项目体验效果。