一. 相同点：
computed和watch都是观察页面的数据变化的。
二. 不同点：
计算属性computed（一对多，一对一）
计算属性将会混入到Vue的实例当中，所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
1、监控自定义的变量，这个变量不可以和data、props里面的变量重复； 2、computed属性的属性值是函数默认走get方法（必须有返回值），属性都有一个get和set方法； 3、支持缓存，只有所依赖的数据发生变化才会重新计算，否则会取缓存中的数据； 4、不支持异步，在computed里面操作异步无效；
代码语言：javascript复制<templete>
<div>{{message}}</div>
</templete>
<script>
data(){
return {
name:'muma',
type:'man'
}
},
computed:{
//仅读取getter
message:function(){
return `${this.muma}是${this.man}孩子！！！`
}，
// 读取getter和设置setter
msg：{
get: function () {
return `${this.muma}是${this.man}`
},
//在给msg重新赋值的时候会调用setter，例如this.msg = '你是谁'。
set: function (newValue) {//newValue是msg新的值
let names = newValue.split('是');
this.muma = names[0];
this.man = names[1];
}
}
}
</script>监听属性watch（多对一）
1、监听data、props里面数据的变化； 2、不支持缓存，每次都会重新计算； 3、支持异步，监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
代码语言：javascript复制<templete>
<div>{{message}}</div>
</templete>
<script>
data(){
return {
name:'muma',
type:'boy',
func:'1',
obj:{
label:'aa'
}
}
},
watch:{
//name变了修改type
name:function(new, old){
this.type = 'girl';
},
'func':'funcChange',
'obj.label':{
handler(new, old){
this.type = 'boy';
},
immediate:true, //控制是否在第一次渲染是执行这个函数
deep:true //控制是否要看这个对象里面的属性变化
}
},
methods:{
funcChange(){
console.log('......')
}
}
</script>三. 总结
computed 1、computed是计算属性，也就是依赖某个值或者props通过计算得来得数据； 2、 computed的值是在getter执行之后进行缓存的，只有在它依赖的数据发生变化，会重新调用getter来计算； 3、 不支持异步，当computed内有异步操作时无效，无法监听数据的变化；
watch 1、watch是监听器，可以监听某一个数据，然后执行相应的操作； 2、不支持缓存，数据变直接会触发相应的操作； 3、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值； 4、支持异步操作；
三. 实际运用场景
- 如果一个数据需要经过复杂计算就用 computed
- 如果一个数据需要被监听并且对数据做一些操作就用 watch
- 当多个属性影响一个属性的时候，建议用computed，比如： fullName(){ return this.firstName this.secondName } fullName是由firstName和secondName影响的，这种情况就适合computed；
- 当一个值发生变化之后，会引起一系列的操作，这种情况就适合用watch；
