Vue.js computed vs Methods

https://cn.vuejs.org/v2/guide/computed.html#计算缓存-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适用于对一个数据监听，我们也可以通过这些变化去维护一个状态，但不适用于监听一个数据来进行复杂的逻辑操作。