Vue的computed和watch

常见的面试问题———谈一谈Vue的computed和watch的区别。这个问题要回答其实很公式化，我们直接把computed和watch分别翻译一下，然后把各自的特点分别说一说，那么这个区别就直接迎刃而解了。

computed

computed是用来做简单计算的，vue的作者认为，页面ui中如果有太多的逻辑计算会让页面维护变得困难，于是发明了computed这个属性，它将响应式的property依赖用函数包裹起来，vue每次运行的时候会将computed的值求出，然后放在缓存处，平时变量的值由缓存处取得。当计算它的依赖发生变化时，缓存才会发生改变并且重新渲染。

//下面演示两种依赖的写法，假设变量num是一个计算属性
 computed：{
    //1.仅读取
    num:function(){
        return xxx//这里写你要返回的表达式
    }
    //2.getter,setter
    num:{
        get:function(){
            return xxx//这里写读取的值
        },
        set:function(value){
            return xxx//这里写改变变量时要写的值        }
    }
}

watch

watch是用来监听Vue实例对象上的值发生的变化的，当我们要对页面中数据发生改变时希望Vue进行一些操作的时候就可以用它。当watch中监听的变量发生了改变的时候，watch就会接收到改变的量从而给watch传入两个值，一个是旧的值，另一个是新的值。watch可以通过immediate,deep等变量来实现更多的功能

//比如此时我要监听vue中的a
watch:{
    a:function(newVal,oldVal){
         console.log(`当前的值是${newVal},之前的值是${oldVal}`)
    }
}
//做个小需求，当我需要页面刷新时，就用watch根据a变量的变化状况发一个值
watch:{
    a:function(newVal){
        console.log(newVal)
    },
    immediate:true
}

这就是我对这道题的理解了