computed与watch的区别

​​​computed：

1. 如果函数所依赖的属性没有发生变化，从缓存中读取
2. 必须有return返回
3. 使用方法和data中的数据一样，但是类似一个执行方法
4. computed里的数据有get和set方法，但是我们常用的是get方法，一般很少用set方法。

<script>    
    computed: {
      double: {
        get：function() {
            return this.num * 2
        }
        set: function(value) {
            this.num = value / 2
        }
      }
    },
    data() {
        return {
            num: 10
        }
    }
</script>
 
 
<template>
    <input v-model="double">
    <input v-model="num">
</template>

watch：

1. watch的函数名必须和data中的数据名一致
2. watch中的函数有俩个参数，新旧
3. watch中的函数是不需要调用的
4. 只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变，要深度监听需要配合deep：true属性使用
5. immediate:true 页面首次加载的时候做一次监听

data（） {
    return {
        obj: {
            'name': "王",
            'age': 18
        },
    }
},
watch: {
    obj: {
        // 执行方法
        handler(oldValue,newVal) {
             console.log(oldValue)
             console.log(newValue)
        },
        deep: true, // 深度监听
        immediate: true  // 第一次改变就执行
    }
 
}

区别：

1. 功能：computed是计算属性，watch是监听一个值的变化而执行对应的回调
2. 是否调用缓存：computed函数所依赖的属性不变的时候会调用缓存；watch每次监听的值发生变化时候都会调用回调
3. 是否调用return：computed必须有；watch可以没有
4. 使用场景：computed当一个属性受多个属性影响的时候；例如购物车商品结算；watch当一条数据影响多条数据的时候，例如搜索框
5. 是否支持异步：computed函数不能有异步；watch可以