Vue面试系列之十：watch和computed的区别以及怎么选用

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

对于任何负责逻辑或一个数据属性在它所依赖的属性发生变化时，也要发生变化，简单来讲，当一个属性受多个属性影响的时候，例如 购物车商品结算时。