如何禁止vue计算属性自带的缓存功能

什么是Vue计算属性？

计算属性是Vue.js提供的一种便捷的方式计算派生出一个新的属性。它根据Vue实例的数据来计算新的值。计算属性会被缓存，只有在它的相关依赖发生改变时才会重新计算。这个缓存功能，可以大大提升性能，但有时候我们需要禁止这个缓存，因为计算属性会一直依赖原有的值，不能重新计算新的值。

// 一个简单的计算属性
computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

为什么想禁止Vue计算属性的缓存功能？

当我们需要计算数据时，计算属性是最常用的方法之一。这个特性让我们能够更加便捷的改变计算属性的值。但有些情况下，我们需要根据用户的实际操作来动态计算新的值，这个时候就需要禁止缓存了。

// 代码演示缓存的影响

  
原始消息: {{ message }}
  
计算后反转消息: {{ reversedMessage }}


var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      console.log('计算反转消息')
      return this.message.split('').reverse().join('')
    }
  }
})

// 控制台输出
计算反转消息

如何禁止Vue计算属性的缓存？

禁止计算属性的缓存需要使用Vue.js提供的watcher，当指定的变量发生变化时，重新计算新的值。我们需要创建一个watcher并在组件中引入Watcher实例。在watcher的回调函数中，重新计算属性的新值。

  
原始消息: {{ message }}
  
计算后不使用缓存的反转消息: {{ noCacheReversedMessage }}


var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello',
    noCacheReversedMessage: ''
  },
  watch: {
    message: function () {
      console.log('重新计算反转消息')
      this.noCacheReversedMessage = this.message.split('').reverse().join('')
    }
  }
})

// 控制台输出
重新计算反转消息

何时应该使用禁止缓存的计算属性？

禁止缓存的计算属性虽然能够更灵活的处理数据，但它的代价是性能，每次有变化时都需要重新计算。因此，在关键路径上使用计算属性可能会降低应用程序的性能。禁止缓存的计算属性最适合以下情况：

• 当数据的值依赖于用户的操作时
• 当计算属性的值和目前时间有关时
• 当计算属性的值由其他计算属性的值影响时
• 当计算属性的值由Vue.js的数据过滤器等其他函数影响时