vue定义在computed的变量无法更新问题及解决

Vue中的计算属性(computed)是Vue提供的一种方便的数据处理方式。通过computed可以实现类似于getter的功能，它会根据依赖的数据自动重新计算结果，并且缓存计算结果，这样节省了额外的计算。然而在使用Vue时，我们可能会遇到computed计算得到的变量无法更新的问题，下面就来详细介绍如何解决这个问题。

问题描述

在Vue组件中，我们定义了一个computed属性，它依赖于data中的一个变量，如下所示：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  computed: {
    message () {
      return `当前计数值: ${this.count}`
    }
  }
}
</script>

当count变量的值发生变化时，我们期望message也会随之更新。但是，在某些情况下，我们会发现message始终保持着最初的值，无法更新。

这是为什么呢？

问题原因

这种情况的原因是由于Vue的原理所导致的。Vue中的计算属性(computed)具有缓存的功能，即当计算属性所依赖的数据没有发生变化时，计算属性的值不会重新计算，而是直接从缓存中获取上一次的值。

上述代码中，当count变量的值发生变化时，message所依赖的数据并没有直接发生变化，因此message的值不会重新计算，而是直接从缓存中获取上一次的值，导致message的值无法更新。

解决方法

为了解决计算属性更新缓存的问题，我们可以使用Vue提供的另一种数据处理方式——计算属性的变体——watcher（侦听器watch）。

计算属性的变体watcher是一种比computed更灵活的数据处理方式。watcher可以监测任意数据的变化，并在数据变化时执行指定的操作。

下面我们来看一下使用watcher解决上述问题的例子：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data () {
    return {
      count: 0,
      message: ''
    }
  },
  watch: {
    count (newVal) {
      this.message = `当前计数值: ${newVal}`
    }
  }
}
</script>

在这个例子中，我们定义了一个watcher来监测count变量的变化，当count变量的值发生变化时，watcher会执行指定的操作，将计算属性message的值更新为当前的count值。这样无论是哪个变量发生了变化，都可以保证watcher会执行相应的操作，保证计算属性的值得到正确的更新。

另外，Vue还提供了一个解决方案，通过给计算属性添加一个唯一的标记，来强制让计算属性的值重新计算，如下所示：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data () {
    return {
      count: 0,
      key: 1
    }
  },
  computed: {
    message () {
      // 在计算属性中添加一个唯一的标记
      return `当前计数值: ${this.count}, 当前标记值: ${this.key}`
    }
  },
  watch: {
    count () {
      this.key += 1 // 当count值发生变化时，修改标记的值
    }
  }
}
</script>

在这个例子中，我们给计算属性添加了一个唯一的标记key，在计算属性中显示了当前计数值和当前标记值的值。当count值发生变化时，watcher会修改标记的值，使得计算属性的值发生变化。这样计算属性的值就能得到正确的更新了。

总结：

通过使用watcher或者给计算属性添加唯一的标记，我们可以有效地解决Vue中computed的变量无法更新的问题，从而保证计算属性的值得到正确的更新。