methods和computed和watch的联系和区别

一.methods和computed

computed是计算属性，methods是方法。

html：

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

js：

1.

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('')

}

}

})
2.

var vm = new Vue({

el: '#example',

data: {

message: 'Hello'

},

methods: {

reversedMessage: function () {

return this.message.split('').reverse().join('')

}

}

})

我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式确实是相同的。

不同的是computed计算属性是基于它们的依赖进行缓存的。计算属性computed只有在它的相关依赖发生改变时才会重新求值。这就意味着只要

message

 还没有发生改变，多次访问 

reversedMessage

 计算属性会立即返回之前的计算结果，而不必再次执行函数。而对于method
，只要发生重新渲染，method 调用总会执行该函数。

当有一个性能开销比较大的的计算属性 A ，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A ，这时候，我们就需要缓存！

但是，缓存也有自己的缺点：

也同样意味着下面的计算属性将不再更新，因为 

Date.now()

 不是响应式依赖：

computed: { now: function () { return Date.now() } }

总之：数据量大，需要缓存的时候用computed；每次确实需要重新加载，不需要缓存时用methods
二.computed和watch

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：watch 属性。

当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 

watch

——特别是如果你之前使用过 AngularJS。然而，更好的想法是使用
computed 属性而不是命令式的 

watch

 回调。细想一下这个例子：

<div id="demo">{{ fullName }}</div>

var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } })

上面代码是命令式的和重复的。将它与 computed 属性的版本进行比较：

var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } })

总之：尽量用computed计算属性来监视数据的变化，因为它本身就这个特性，用watch没有computed“自动”，手动设置使代码变复杂。