Vue.js computed vs Methods

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

我们可以使用methods 来完成计算属性需要完成的事，

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

最终结果二者是一样的。

区别：

官网表明计算属性是基于它的依赖缓存。

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

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

也就是说只要不是直接使用浏览器刷新页面，当我们改变数据、DOM操作等引起页面重新渲染时，

计算属性会直接使用缓存，不会重新执行函数。适合那些计算量很大且改变频率很低的属性；

如果使用methods，每次页面重新渲染时都会重新执行methods函数。

一.computed适用于对多数据变动进行监听，然后维护一个状态（返回一个状态）。

二.watch适用于对一个数据监听，我们也可以通过这些变化去维护一个状态，但不适用于监听一个数据来进行复杂的逻辑操作。