17Vue - 计算属性（计算缓存 vs Methods)

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

HTML:

Reversed message: "{{ reverseMessage() }}"

JS:

// in component
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

不经过计算属性，我们可以在 method 中定义一个相同的函数来替代它。对于最终的结果，两种方式确实是相同的。

然而，不同的是计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要 message 没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

这也同样意味着如下计算属性将不会更新，因为Date.now() 不是响应式依赖：

computed: {
  now: function () {
    return Date.now()
  }
}

相比而言，每当重新渲染的时候，method 调用总会执行函数。

我们为什么需要缓存？假设我们有一个重要的计算属性 A ，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter ！如果你不希望有缓存，请用 method 替代。