vue计算属性如何监听数组变化

Vue的计算属性默认情况下只会在它所依赖的属性发生变化时重新计算。对于数组，如果你想监听它的变化，可以使用以下两种方法：

1. 监听数组变化的方法：使用`watch`来监听数组的变化，然后在`watch`回调中更新计算属性。

data() {
  return {
    arr: [1, 2, 3]
  }
},
computed: {
  sum() {
    return this.arr.reduce((acc, cur) => acc + cur, 0)
  }
},
watch: {
  arr: {
    handler() {
      this.sum // 手动更新计算属性
    },
    deep: true // 监听数组内部元素的变化
  }
}

2. 使用`Vue.set`或者`this.$set`方法来改变数组元素，这样Vue就能够监听到数组的变化。因为Vue无法检测到直接修改数组索引或者长度的变化。

methods: {
  addItem() {
    this.$set(this.arr, this.arr.length, 4) // 通过this.$set添加元素
  },
  removeItem() {
    this.arr.splice(0, 1) // 直接删除元素，Vue无法检测到
  }
}