vue计算属性无法监听到数组内部变化的解决方案

当 Vue 响应式系统检测到 data 对象中某个属性发生变化时，Vue 会自动更新渲染视图。然而，在某些情况下，Vue 无法监控到数据的变化，例如对数组的操作。为解决这个问题，Vue 提供了计算属性，可以监控数据的变化并且自动更新视图。

但是，当我们对数组进行变异操作时（例如使用 push()，pop()，shift()，unshift() 等方法），Vue 无法自动监控到数据的变化。此时，计算属性就会失效，需要使用其他方法来监听数组内部的变化。

以下是两种监听数组变化的实现方式：

方案一：使用$set()方法

$set() 方法是 Vue 提供的全局方法，可以强制触发视图更新。具体用法如下：

this.$set(arr, index, value)

其中 arr 表示要操作的数组，index 表示要修改的元素的下表，value 表示新的值。

示例代码：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <button @click="addItem">添加一项</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['apple', 'banana', 'orange']
    }
  },
  methods: {
    addItem() {
      this.arr.push('watermelon')
      this.$set(this.arr, 2, 'pear')
    }
  }
}
</script>

执行 addItem 方法后，虽然没有更新视图，但是使用 $set() 方法对数组进行修改后，数组内部的变化就会被 Vue 监听到，视图也会自动更新。

方案二：使用Vue.set()方法

Vue.set() 方法也是强制触发视图更新的方法，与 $set() 方法的用法略有不同：

Vue.set(obj, key, value)

其中，obj 表示要操作的数组或对象，key 表示要修改的属性名或下标，value 表示新的值。

示例代码：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <button @click="addItem">添加一项</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['apple', 'banana', 'orange']
    }
  },
  methods: {
    addItem() {
      Vue.set(this.arr, 2, 'pear')
    }
  }
}
</script>

在这个示例中，我们使用 Vue.set() 方法对数组进行了修改，Vue 能够监听到数组内部的变化，并自动更新视图。

总结：当 Vue 无法监控到数组内部变化时，可以使用 $set() 或 Vue.set() 方法来解决问题。