computed和watch的相同和不同点

先看一下代码格式的区别

// 计算属性
computed: {
    fullName: function() {
        return this.firstName + ' - ' +this.lastName;
    }
}

// 监听属性  方式一
watch: {
    firstName: function(newV,oldV) {
        this.fullName = newV + ' - ' + this.lastName;
    }, 
    lastName: function(newV,oldV) {
        this.fullName = this.firstName + ' - ' + newV;
    }
}

// 监听属性  方式二
watch: {
    handler: {
        firstName(newV,oldV){
            this.fullName = newV + ' - ' + this.lastName;
        },
        // 默认值第一次在watch中绑定的时候不会触发监听，当immediate为true的时候会立即执行一次。
        immediate: true,
        // 是否深度监听对象的属性
        deep: true 
    }
}

一、定义

computed：计算属性，可代替{{}}模板中复杂的计算逻辑，具有响应功能，监听在data()、props、vueX等中定义的一个或多个属性，并返回计算后的值。

watch：监听属性，监听在data()、props等中某个属性值的变化。

二、相同点

都具有监听属性变化的功能

三、不同点

computed：

        1、可监听多个属性变化，多对一；

        2、不支持异步；

        3、计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们

              才会重新求值，性能开销小。

watch：

        1、监听一个属性，并接受两个入参，第一个是新值，第二个是旧值；

        2、支持异步；