vue监听数组变化获取数组旧值

在 Vue 中，可以使用 `watch` 监听数组的变化。但是 `watch` 默认是不会监听到数组中每个元素的变化的，而只会监听到数组本身的变化，如 push、pop、shift、unshift、splice 和 sort 等方法的调用。如果想要监听到数组中元素的变化，可以使用 `deep` 选项，将其设置为 `true`。代码示例如下：

watch: {
  arr: {
    handler(newVal, oldVal) {
      console.log('数组发生变化啦！')
      console.log('新值：', newVal)
      console.log('旧值：', oldVal)
    },
    deep: true // 开启深度监听
  }
}

需要注意的是，开启 `deep` 监听会带来一些性能上的损耗，因为每当数组中的元素发生变化时，都会触发一次回调函数。如果数组较大，可能会影响页面的性能。如果只想监听某个特定的元素，可以考虑使用 `$watch` 方法，手动监听该元素的变化。