计算属性与方法的区别

计算属性和方法都可以完成同样的操作，其写法及效果很相似，例如：

//方法
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}
//计算属性
computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

两者不同在于，计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
计算属性缓存vs方法