Vue学习-computed和watch的区别

1. computed属性

computed属性是vue中一种计算数据的功能，基于data中已声明的数据或者通过父组件传递的props中的数据通过计算得到的一个新的值，这个新值只会根据已知数据的变化而变化。
简单来说就是，computed属性可以计算数据，但是只能计算已经存在的值。
举个简单的例子：

<div id="app">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名：<span>{{fullName}}</span>
</div>
......
 data:{
   firstName:"张",
   lastName:"三"
 },
 computed:{
   fullName:function () {
     console.log("get被调用了")
     return this.firstName + '-' +this.lastName
   }
}

在computed属性对象中定义计算属性的方法，在页面中使用{{方法名}}来显示计算的结果。
computed和data、methods等配置对象同级！
同时在官方文档中还强调了一点，computed带有缓存功能，只有当它初次读取时和依赖的数据发生变化时，computed才会重新计算。
在上述例子中，多次调用fullname，会发现get输出只有使用的数据变化时，fullname才被重新调用。

<div id="app">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名：<span>{{fullName}}</span>
    全名：<span>{{fullName}}</span>
    全名：<span>{{fullName}}</span>
    全名：<span>{{fullName}}</span>
</div>

computed的功能强大，来自于它自身具有的get和set方法，属性利用getter和setter来实现对属性数据的显示和监视，即双向绑定。当数据变化时，调用set方法，将新数据重新赋值。

computed:{
   fullName:{
                //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为funllName的值
                //get什么时候被调用？ 1.初次读取fullName时。 2.所依赖的数据发生变化时
                get(){
                    console.log("get被调用了")
                    console.log(this);
                    return this.firstName + '-' +this.lastName
                },
                //set什么时候被调用？ 当fullName被改变时
                set(value){
                    console.log('set',value)
                    //引起计算时依赖的数据发生变化
                    const arr= value.split('-')
                    this.firstName=arr[0]
                    this.lastName=arr[1]
                }
            }
}

2. watch属性

watch属性可以用来监测数据的变化。可以通过vm对象的$watch或 watch配置来监听Vue实例上的属性变化或数据变化。当属性变化时，回调函数自动调用，在函数内部进行计算。其可以监听的数据来源：data，props，computed 内的数据。

注： 监听函数有两个参数，第一个参数是最新的值，第二个参数是输入之前的值，顺序一定是**(新值，旧值)**，如果只写一个参数，那就是最新属性值。

在使用时选择 watch 还是 computed，还有一个参考点就是官网说的：当需要在数据变化时执行异步或开销较大的操作时，watch方式是最有用的。所以 watch 一定是支持异步的。
监听简单数据类型，监听复杂数据类型就需要用到深度监听 deep。

data: {
//fullname是复杂数据类型
    fullName: {
        firstName: 'David',
        lastName: 'Beckham'
    }
},
watch: {
    fullName: {
        handler(newVal, oldVal) {
            console.log(newVal);
            console.log(oldVal);
        },
        //必须开启深度监听，才能 监测到fullName因firstName和lastName任意一个值的变化
        deep: true
    }
}

3. 总结：

watch和computed都是以Vue的依赖追踪机制为基础的，当某一个依赖型数据（依赖型数据：简单理解即放在 data 等对象下的实例数据）发生变化的时候，所有依赖这个数据的相关数据会自动发生变化，即自动调用相关的函数，来实现数据的变动。

当依赖的值变化时，在watch中，是可以做一些复杂的操作的，而computed中的依赖，仅仅是一个值依赖于另一个值，是值上的依赖。

应用场景：
**computed:**用于处理复杂的逻辑运算；一个数据受一个或多个数据影响；用来处理watch和methods无法处理的，或处理起来不方便的情况。例如处理模板中的复杂表达式、购物车里面的商品数量和总金额之间的变化关系等。
**watch：**用来处理当一个属性发生变化时，需要执行某些具体的业务逻辑操作，或要在数据变化时执行异步或开销较大的操作；一个数据改变影响多个数据。例如用来监控路由、inpurt
输入框值的特殊处理等。

区别：

computed :

• 初始化显示或者相关的 data、props 等属性数据发生变化的时候调用； 计算属性不在 data 中，它是基于data props 中的数据通过计算得到的一个新值，这个新值根据已知值的变化而变化；
• 在 computed属性对象中定义计算属性的方法，和取data对象里的数据属性一样，以属性访问的形式调用；
• 如果 computed 属性值是函数，那么默认会走get 方法，必须要有一个返回值，函数的返回值就是属性的属性值；
• computed属性值默认会缓存计算结果，在重复的调用中，只要依赖数据不变，直接取缓存中的计算结果，只有依赖型数据发生改变，computed 才会重新计算；
• 在computed中的，属性都有一个 get 和一个 set 方法，当数据变化时，调用 set 方法。

watch

• 主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是 computed 和 methods 的结合体；
• 可以监听的数据来源：data，props，computed内的数据； watch支持异步；
• 不支持缓存，监听的数据改变，直接会触发相应的操作；
• 监听函数有两个参数，第一个参数是最新的值，第二个参数是输入之前的值，顺序一定是新值，旧值。