计算属性缓存 vs 方法

其实，在使用计算属性的位置，我们通过调用方法可以达到同样的效果

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

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

 

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

相比之下，每当触发重新渲染时，调用方法总会再次执行函数。