相同点:methods,watch和computed都是以函数为基础的,但各自都不同 不同点: 一 作用机制: 1.watch和computed都是以Vue的依赖追踪机制为基础的,他们都试图处理这样一件事情:当某一个数据(依赖数据)发送变化的时候,所有依赖这个数据的相关数据自动发生变化,也就是自动调用相关的函数去实现数据得到变动
2对methods:methods里面是用来定义函数的,很显然,他需要手动调用才能执行,而不像watch和computed那样,自动执行预先定义的函数
二、从性质上
1.methods里面定义的是函数，你显然需要像"fuc()"这样去调用它（假设函数为fuc）。
2.computed是计算属性，事实上和和data对象里的数据属性是同一类的（使用上）。
3.watch:类似于监听机制+事件机制。
例如：
watch: {
firstName: function(val) {this.fullName = val +this.lastName }
}
firstName的改变是这个特殊“事件”被触发的条件，而firstName对应的函数就相当于监听到事件发生后执行的方法
三 watch和computed的对比:
首先它们都是以Vue的依赖追踪机制为基础的，它们的共同点是：都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。我们当然可以自己写代码完成这一切，但却很可能造成写法混乱，代码冗余的情况。
但watch和computed也有明显不同的地方：
watch和computed各自处理的数据关系场景不同
1.watch擅长处理的场景：一个数据影响多个数据
2.computed擅长处理的场景：一个数据受多个数据影响
相比于watch/computed，methods不处理数据逻辑关系，只提供可调用的函数
methods：正如他的名字一样，它们是挂载在对象上的函数，通常是Vue实例本身或Vue组件。
computed：属性最初看起来像一个方法，但事实却又不是方法。在Vue中，我们使用data来跟踪对特定属性的更改，得到一定的反应。计算属性允许我们定义一个与数据使用相同方式的属性，但也可以有一些基于其依赖关系的自定义逻辑。你可以考虑计算属性的另一个视图到你的数据。
watchers：这些可以让你了解反应系统（Reactivity System）。我们提供了一些钩子来观察Vue存储的任何属性。如果我们想在每次发生变化时添加一些功能，或者响应某个特定的变化，我们可以观察一个属性并应用一些逻辑。这意味着观察者的名字必须与我们所观察到的相符。
computed和methods
计算属性是很具依赖关系进行缓存计算的并且只在需要的时候进行更新: 比较computed和methods方法:
<div id="demo">
<p>原数据{{message}}</p>
<p>反转后的数据{{reversedMessage}}</p>
<button @click="add()">补充货物1</button>
<div>总价为：{{price}}</div>
</div>
<script>
var demo = new Vue({
el: ‘#demo‘,
data: {
message :‘abcdefg‘,
package: {
count: 5,
price: 5
},
},
computed:{
reversedMessage:function(){
return this.message.split(‘‘).reverse().join(‘‘)
},
price: function(){
return this.package.count*this.package.price  
}
},
methods: {
add: function(){
this.package.count++
}
}
})
</script>
使用computed属性得到的结果是由缓存在,而使用methods方法获取到的结果是没有缓存的,计算属性虽然是以函数的形式设置的,但是在使用的时候他的属性使用跟普通定义data中的数据是一样使用的
watch
watch属性是一个对象，键是需要观察的表达式，值是对应回调函数，回调函数得到的参数为新值和旧值。值也可以是方法名，或者包含选项的对象。侦察器对于任何更新的东西都有用——无论是表单输入、异步更新还是动画。vue实例在实例化时调用$watch()，遍历watch对象的每一个属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<button @click=‘a++‘>a加1</button>
<p>{{message}}</p>
</div>
<script>
var demo = new Vue({
el: ‘#demo‘,
data: {
message :‘‘,
a:1
},
watch:{
a:function(val,oldval){
this.message = ‘a的旧值为‘ + oldval + ‘,新值为‘ + val;
}
}
})
</script>
</body>
</html>
watch和computed监听特点
watch监听特点:
监听到某个数据的变化后,侧重于做某件事情,也就是说,只要监听的数据发生了变化,会自动触发watch中指定的处理函数
computed计算属性的特点: 同时监听到多个数据变化后,侧重于得到某个值,也就是说依赖的任何一个数据发生了变化,就会触发计算属性自动求值
