1. 区别
1.1 定义/语义区别
watch
<input type="test" v-model="foo">
var vm=new Vue({
el:"#demo",
data:{
foo:1
},
watch:{
foo:function(newVal,oldVal){
console.log(newVal+''+oldVal)
}
}
})
vm.foo=2 // 新值2 旧值1
computed
var vm=new Vue({
el:"#demo",
data:{
firstName:"Foo",
lastName:"Bar"
},
computed:{
fullName:function(){
return this.firstName+" "+this.lastName
}
}
})
vm.fullName // Foo Bar computed内部函数调用的时候不需要加()
1.2 功能区别
watch更通用,computed派生功能都能实现,计算属性底层来自于watch,但做了更多,例如缓存;
1.3 用法区别
computed更简单/更高效,优先使用;
有些必须watch,比如值变化要和后端交互。
2. 使用场景
watch
watch需要在数据变化时执行异步或开销较大的操作时使用,简单来讲,当一条数据影响多条数据的时候。例如搜索数据;
computed
对于任何负责逻辑或一个数据属性在它所依赖的属性发生变化时,也要发生变化,简单来讲,当一个属性受多个属性影响的时候,例如 购物车商品结算时。