1.computed支持缓存（只有引用的响应式属性改变时才会重新计算）
2.不支持异步操作
3.computed中的属性有一个get和set方法，如果属性为函数时，默认调用get方法。
new Vue({
el:"#app",
template:`<div>
<input type="text" v-model="firstName">+
<input type="text" v-model="lastName">=
<input type="text" v-model="fullName">
</div>`,
data(){
return{
firstName:‘shuaige‘,
lastName:‘bie‘
}
},
computed: {
fullName(){
return this.firstName + ‘ ‘ + this.lastName
}
}
当属性为对象时，可以使用其set方法
new Vue({
el:"#app",
template:`<div>
<input type="text" v-model="firstName">+
<input type="text" v-model="lastName">=
<input type="text" v-model="fullName">
</div>`,
data(){
return{
firstName:‘shuaige‘,
lastName:‘bie‘
}
},
computed: {
fullName:{
get(){
return this.firstName + ‘ ‘ + this.lastName
},
set(newVal){
this.firstName = newVal.split(" ")[0]
this.lastName = newVal.split(" ")[1]
}
}
}
//当直接更改fullName时，会触发set方法，firstName和lastName的值也会被修改
1.watch不支持缓存，会直接监听数据，当数据改变时，会直接触发对于的操作
2.watch支持异步操作
3.watch可以接收参数（oldValue，newValue）
4.watch中的属性必须时data中声明或者其他组件传递过来的数据
new Vue({
el:"#app",
template:`<div>
<input type="text" v-model="firstName">+
<input type="text" v-model="lastName">=
<input type="text" v-model="fullName">
</div>`,
data(){
return{
firstName:‘shuaige‘,
lastName:‘bie‘,
fullName:‘shuaige bie‘
}
},
watch:{
firstName(val){
console.log(‘第一次没有触发‘)
this.fullName = val +" " + this.lastName
}
}
5.watch中的属性为对象时，可以使用其handler方法、immediate属性（当为true时，页面刷新时就会调用handler方法）和deep属性（当为true时，能够监听复杂属性类型）
new Vue({
el:"#app",
template:`<div>
<input type="text" v-model="firstName">+
<input type="text" v-model="lastName">=
<input type="text" v-model="fullName">
</div>`,
data(){
return{
firstName:‘shuaige‘,
lastName:‘bie‘,
fullName:‘shuaige bie‘
}
},
watch:{
firstName:{
handler(val){
console.log(‘第一次有触发‘)
this.fullName = val +" " + this.lastName
},
immediate:true，
//deep:true
}
}
在应用中，computed主要用于同步数据，当一个数据受到多个数据的影响时，应该使用computed；而当一个值变换时需要实现其他数据的更改或者异步操作时，应该使用watch，例外，能够使用computed应该尽量使用computed，这样性能才不会被过度的占用
原文：https://www.cnblogs.com/shuaigebie/p/12769817.html