vue中computed与watch的区别

• computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。

• watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。

<div>{{Name}}</div>
data(){
return {
num:0,
lastname:'',
firstname:'',
}
}
//当num的值发生变化时，就会调用num的方法，方法里面的形参对应的是num的新值和旧值
watch:{
num:function(val,oldval){
    console.log(val,oldval);
}
},
//计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
computed:{
    Name:function(){
        return this.firstname+this.lastname;
    }
}

首先它们都是以Vue的依赖追踪机制为基础的，它们的共同点是：都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。
但watch和computed也有明显不同的地方：
watch和computed各自处理的数据关系场景不同
(1).watch擅长处理的场景：一个数据影响多个数据
(2).computed擅长处理的场景：一个数据受多个数据影响

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。