1.methods的方法是通过触发一个事件或者函数的回调来实现数据的更新，他的执行，依赖于事件的触发。
2.watch的类似于emit与on这种触发的方式，通过vue的$watch实例监听值得改变来自动的触发一个函数的执行。
3.computed函数的执行最快也是执行最靠前的，在html渲染开始，就已经执行了。
计算属性 ：和普通属性一样是在模板中绑定计算属性的，当data中对应数据发生改变时，计算属性的值也会发生改变。
Methods：methods是方法，只要调用它，函数就会执行。
相同：两者达到的效果是同样的。
不同：计算属性是基于它们的依赖进行缓存的，只有相关依赖会发生改变时才会重新求职。只要相关依赖未改变，只会返回之前的结果，不再执行函数。
watched属性：代码更易于理解，它指定监测的值是谁，然后相应的改变其他的值。
methods事件的触发就不说了，直接回调或者是绑定的@这样的事件来触发。
而watch的触发消耗也大，每次数据的改变就要触发一次函数的执行，要节省着点用啊。
computed用在改变一个变量的显示，和data对象里的数据属性是同一类的。返回的值直接就修改掉了原先的值，最大的优点在于简洁速度快也可以作为一个过滤器用也可以起到data中声明一个变量的作用，依赖别的变量来显示新的变量。
computed计算属性是基于它们的依赖进行缓存的。计算属性computed只有在它的相关依赖发生改变时才会重新求值。这就意味着只要message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。而对于method ，只要发生重新渲染，method 调用总会执行该函数。
总之：数据量大，需要缓存的时候用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“自动”，手动设置使代码变复杂。