一、watch
1、介绍：
主要用于监控 Vue 实例的变化，监控的变量必须在data里面声明，可以监控一个变量或者一个对象。
通过 vm 对象的$watch或watch配置来监视指定的属性，当属性变化时，回调函数自动调用，在函数内部进行计算，回调函数得到的参数为新值和旧值。
2、实例：
input输入框：
<template>
<div>
<label>医疗机构：<input type="text" placeholder="请输入医疗机构" v-model="hospitalName"></label>
</div>
</template>
<script>
export default {
data() {
return {
hospitalName: ""
}
},
watch:{
// 监听hospitalName
hospitalName(value){
console.log(`watch监视到hospitalName发生改变：${value}`);
//更新hospitalName
this.hospitalName = value
}
},
}
</script>
注：如果有一个搜索按钮，点击按钮的时候才会进行数据的响应和操作，这时最好使用computed。
select选择框：
<template>
<div>
<label>支付方式：</label>
<select v-model="modeSelected">
<option :value="mode.name" v-for="mode in modeList" >{{mode.name}}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
modeList:[
{
id: '0',
name: '全部'
},
{
id: '1',
name: '支付宝'
},
{
id: '2',
name: '微信'
},
{
id: '3',
name: '银联'
}
],
modeSelected: '',
}
},
watch:{
// 监听modeSelected
modeSelected(value,oldvalue){
console.log(`watch监视到modeSelected新值：${value}`);
console.log(`watch监视到modeSelected旧值：${oldvalue}`);
//更新modeSelected
this.modeSelected = value
}
},
created() {
//如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
this.modeSelected = this.modeList[0].name;
}
}
</script>
3、使用场景：
watch一般用于监控路由、搜索框之类的，需要不断地响应数据的变化，适合一个数据影响多个数据的场景。
二、computed
1、介绍：
减少模板中的计算逻辑，监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。
在页面中使用{{方法名}}来显示计算的结果，通过getter/setter实现对属性数据的显示和监视。
computed比较适合对多个变量或者对象进行处理后统一返回一个结果值，也就是数多个变量中的某一个值发生了变化，则我们监控的这个值也就会发生变化。
2、实例：
<template>
<div>
<label>姓名：{{Name}}</label>
</div>
</template>
<script>
export default {
data() {
return {
firstName:"Fan",
lastName:"JunYang"
}
},
computed:{
Name(){
return this.firstName + " " + this.lastName
}
}
}
</script>
注：当改变其中一个值的时候，另一个值并不会进行重新计算，从而减少了开销。
3、使用场景：
computed擅长使用的场景：一个数据受多个数据影响。
总结
能用computed的地方，尽可能使用computed。
computed是计算一个新的属性，并将该属性挂载到vm上，而watch是监听已经存在且挂载在vm上的数据，所以用watch同样可以监听computed计算属性的变化。
computed具有缓存性，只有当依赖变化后，第一次访问computed属性，才会计算新的值，而watch则是当数据发生变化便会调用执行函数。
从使用场景上来看，computed的适用一个数据被多个数据影响，而watch适用一个数据影响多个数据。
