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更适用于数据变化时的异步操作。
