Vue.js的computed和methods#

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

<p>Reversed message: "{{ reversedMessage() }}"</p>
// in component
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

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

总结：当我们改变数据、dom操作等引起页面重新渲染时，method调用总会执行函数。计算属性会直接使用缓存，不会重新执行函数。

附录：但是在有些情况下，虽然依赖数据属性发生了变化，但计算属性的getter方法并不会执行。当包含计算属性的节点被移除并且模版中其他地方没有再引用该属性时，那么对应的计算属性的getter方法不会执行。