一、先来看看watch
1.watch对数据的监控观察
var vm = new Vue({
//......
data: {
name: "张三"
},
watch: {
"name": function() {
//.....
}
}
})
上面的代码，我们在data中定义了name的值。而下面的watch也对应键名定义了name，值为一个函数。此时表示watch当前已经监听了data中的name，当name的值发生改变时，则立即执行对应的函数。
此函数中还规定了两个参数来方便我们取得数据
watch: {
"name": function( newVal, oldVal ) {
//.....
}
第一个参数（newVal）：数据改变后的值
第二个参数（oldVal）：数据改变之前的值
2.watch监听路由的改变
watch不仅可以监听data中的数据，还可以监听路由的变化。
在Vue实例中，使用$route.path监听路由地址的改变
var vm = new Vue({
//......
watch: {
"$route.path": function() { }
}
})
同时，在对于操作比较耗时的操作也是可以使用 watch 监听。例如用户注册时，检测账号是否可用等...
二、再来看看computed
定义：是一个计算属性,类似于过滤器,对绑定到view的数据进行处理
computed是Vue内部规定的【计算属性】，与watch很像，也可以用来监听数据的获取和改变。
//html
<div id="app">
<input type="text" v-model = "fis">
<input type="text" v-model = "thir">
{{ sec }}
</div>
//js
var vm = new Vue({
el:'#app',
data:{
fis: 3,
thir: 5,
},
computed:{
sec: {
get: function(){ return this.thir}, //只要function中的数据（这里是thir）发生变化，就会触发函数
set: function(val){ return 1}
}
}
})
上面的代码中，定义了computed，监听了sec（属性），只要当函数定义的内部数据发生变化，即会触发函数。函数返回的值便是sec的新值
当sec属性发生改变，触发set函数，若sec中只有一个函数，则会默认定义了get
set函数中可以传一个参数，为当前数据新的值
一般使用场景
使用计算属性简化模板
//简化前
{{msg.split('').reverse().join('')}}
//简化后
HTML:
{{revserseString}}
JS:
computed: {
revserseString: function (){
return this.msg.split('').reverse().join('')
}
}
上面定义了颠倒字符串的方法，使用计算属性来简洁了模板。
4.二者的区别
computed
在computed中定义的每一个计算属性，都会被缓存起来，只有当计算属性里面依赖的一个或多个属性变化了，才会重新计算当前计算属性的值。
1、支持数据的缓存。
2、函数内部的数据改变也会触发。
3、不支持异步，当computed内部有异步操作时computed无效
4、如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，一般用computed
5、computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。
watch
watch是属性监听器，一般用来监听属性的变化（也可以用来监听计算属性函数），并做一些操作
1、不支持缓存
2、支持异步
3、只可以设置一个函数，可以带有两个参数
4、监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作
