methods：methods里面是函数调用，在调用时当做一个普通函数调用：

<div id="app">{{sum()}}</div><!-- 显示  3 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
   new Vue({
       el : '#app',
       data : {
           a : 1,
           b : 2
       },
       methods : {
           sum:function () {
               return this.a + this.b;
           }
       }
   })
</script>

computed：computed是计算属性，在调用时调用的是属性:

<div id="app">{{sum}}</div><!-- 显示  3 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el : '#app',
        data : {
            a : 1,
            b : 2
        },
        computed : {
            sum:function () {
                return this.a + this.b;
            }
        }
    })
</script>

值得一提的是methods每一次都会重新执行函数，而computed只会执行一次（数据改变除外），之后都是获取的是缓存中的计算属性值。

computed 应用场景
1. 适用于一些重复使用数据或复杂及费时的运算。我们可以把它放入computed中进行计算, 然后会在computed中缓存起来, 下次就可以直接获取了。
2. 如果我们需要的数据依赖于其他的数据的话, 我们可以把该数据设计为computed中。

watch：watch是Vue的监听（侦听），在调用时调用的是监听的data里面的属性：

<div id="app">{{sum}}</div><!-- 显示  3 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el : '#app',
        data : {
            a : 1,
            b : 2,
            sum : 0
        },
        watch: {
            sum:{
                handler(newValue,oldValue){
                    this.sum = 0;
                    this.sum = this.a + this.b; 
                },
                immediate:true//初始时计算一次
            }
        }
    })
</script>

在watch中有两个属性值：deep和immediate，还有一个handler方法。
handler方法：watch当中的方法默认就是这个handler方法。
deep属性：是否深度监听某个对象的值, 该值默认为false。deep实现机制是: 监听器会一层层的往下遍历, 给对象的所有属性都加上这个监听器。当然性能开销会非常大的。
immediate属性：该值默认是false，在进入页面时，第一次绑定值，不会立刻执行监听，只有数据发生改变才会执行handler中的操作。当immediate的值是true时，在进入页面是就会立即执行一次handler中的操作。

watch 和 computed的区别是：
相同点：他们两者都是观察页面数据变化的。
不同点：computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。
watch每次都需要执行函数。watch更适用于数据变化时的异步操作。