Vue——computed和watch理解

最近在学习Vue，了解到computed和watch，现在来分别学习一下，然后看一下他们的区别。

首先通过下面的思维导图来看一下computed的作用和使用方法：

一、computed

来看一下computed在代码中的使用：

<template>
    <div>
        名字：<input type="text" v-model="firstName" placeholder="请输入名字">
        <p></p>
        姓氏：<input type="text" v-model="lastName" placeholder="请输入姓氏">
        <p>-----------------------------------------------------------------------</p>
        姓名：<input type="text" v-model="fullName">
    </div>
</template>

<script>
    export default {
        name: "ComputedAndWatch",
        data(){
            return{
                firstName:'',//名
                lastName:''//姓
            }
        },
        computed:{
            //计算属性：姓名
            fullName:{
                get(){
                    return this.lastName+'.'+this.firstName;
                },
                set(value){
                    let names = value.split('.');
                    this.firstName = names[1];
                    this.lastName = names[0];
                }
            }
        }
    }
</script>

运行效果不方便演示，简单说明一下：

当输入名字或者姓氏时，姓名输入框就会动态变化；同样的，当姓名输入框数据改变时，名字或者姓氏的输入框内容也会发生相应的改变。我们通过computed的get和set方法实现了，两组数据的双向绑定。从代码再来分析一下computed的作用。

1、减少模板计算逻辑：它可以帮助我们将在模板中的一些稍微复杂的逻辑计算放回到js代码中，方便理解与修改维护。例如代码中fullName的计算方法，通过在钩子函数computed中定义，使用时直接拿来用即可，减少了<template>中的代码计算逻辑。

2、进行数据缓存和响应式数据： 在computed中定义的每一个计算属性，都会被缓存起来，只有当计算属性里面依赖的一个或多个属性变化了，才会重新计算当前计算属性的值。上面的代码片段中，fullName依赖了firstName和lastName这两个属性，一旦其中一个变化了，fullName会立刻重新计算输出新值。

二、watch 

 

watch在代码中的使用：

<template>
    <div>
        名字：<input type="text" v-model="firstName" placeholder="请输入名字">
        <p></p>
        姓氏：<input type="text" v-model="lastName" placeholder="请输入姓氏">
        <p>-----------------------------------------------------------------------</p>
        姓名：<input type="text" v-model="fullName">
    </div>
</template>

<script>
    export default {
        name: "ComputedAndWatch",
        data(){
            return{
                firstName:'',//名
                lastName:'',//姓
                fullName: ''//姓名
            }
        },
        watch:{
            //计算属性：姓名
            firstName(value){
                this.fullName = value+'.' + this.lastName;
            },
            lastName(value){
                this.fullName = this.firstName + '.'+value;
            },
            fullName(value){
                let names = value.split('.');
                this.firstName = names[0];
                this.lastName = names[1];
            }
        }
    }
</script>

以上代码可以实现和computed同样的效果。 watch是属性监听器，一般用来监听属性的变化（也可以用来监听计算属性函数），并做一些逻辑。更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作。

总结：

1) computed能做的， watch都能做，反之则不行

2)能用computed的地方，尽可能使用computed

3) computed 是计算个新的属性， 并将该属性挂载到vm (Vue 实例)上， 而watch是监听已经存在且已挂载到vm_上的数据，所以用watch同样可以监听computed计算属性的变化(其它还有data、props)

4) computed本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第次访问

computed属性，才会计算新的值，而watch则是当数据发生变化便会调用执行函数

5)从使用场景上说，computed 适用个单个数据被多个数据影响，而watch适用个单个数据影响多个数据