Vue.js 计算属性缓存导致的Bug

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。所以，对应任何复杂逻辑，你都应当使用计算属性。

计算属性缓存 vs 方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：

<p>Reversed message: "{{ reversedMessage() }}"</p>

 

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的、然而，不同的是计算属性时基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。

博主在做一个数据可视化方面的项目时，曾经遇到这样一个问题：

 

 

把getPath定义为计算属性，发现一个bug（其中data为普通data属性）， getPath返回的结果始终为第一次data造成的。我一开始认为是否是data没有成功响应，在一些方法中console.log打印却发现data其实是已经变化了的。后面脑子里面想到是否是计算属性缓存导致的。

修改代码之后，经过测试，确实是由计算属性导致。原因为相关依赖未发生改变，所以返回的是缓存的结果，因此这种情况下建议将计算属性中代码包装成method。