Vue 计算属性（computed）和侦听器（watch）

计算属性：computed

本文章首更于掘金账号，主要是为了方便自己以后复习和回忆，有错误或不合理之处还请大家指正。

作用

• 减少模板中的计算逻辑
• 进行数据缓存
• 依赖固定的数据类型

使用

• 在computed属性对象中定义计算属性的方法
• 在页面中使用{{方法名}}来显示计算的结果
• 通过getter/setter实现对属性数据的显示和监视

注意点

• 计算属性是基于它们的依赖进行缓存的，只有相关的依赖发生改变时才会重新求值。只要相关的依赖未改变，只会返回之前的结果，不会执行函数。
• computed依赖监控自己定义的变量，computed不能计算已经在data里面定义过的值，该变量在computed里面定义，然后可以在页面上进行数据绑定
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

实例

<template>
    <div>
        <label>姓：<input type="text" placeholder="请输入姓氏" v-model="firstName"></label><br/>
        <label>名：<input type="text" placeholder="请输入名字" v-model="lastName"></label>
        // 可以直接绑定计算属性
        <label>姓 名：<input type="text" placeholder="请输入姓名" v-model="fullName"></label>
    </div>
</template>

<script>
    export default {
        name: "ComputedAndWatch",
        data(){
            return {
                firstName:'',
                lastName:'',
            }
        },
        computed:{
            fullName:{
                get(){
                    return this.firstName + '·' + this.lastName

                }
            }
        }
    }

实现双向绑定

set(value){
    console.log(`${value}`);        // 测试：使用字符串拼接只能使用“ ` ”
    let names = value.split('·');
    this.firstName = names[0];
    this.lastName = names[1];
}

使用场景

• computed擅长处理的场景：一个数据受多个数据影响
  

侦听器：Watch

作用

• 主要用于监控vue实例的变化，监控的变量必须在data里面声明才可以
• 可以监控一个变量或者一个对象，但是只能监控整个对象或单个变量、
• 依赖于固定的数据类型（响应式数据）

使用

• 通过vm对象的$watch()或watch配置来监视指定的属性
• 当属性变化时，回调函数自动调用，在函数内部进行计算
• watch不能双向的绑定值

实例

watch:{
    // 监听firstName
    firstName(value){
        console.log(`watch监视到firstName发生改变：${value}`);
        //更新fullName
        this.fullName  = value + '·' + this.lastName
        },
    // 监听lastName
    lastName(value){
        console.log(`watch监视到lastName发生改变：${value}`);
        this.fullName  = this.firstName + '·' + value
        }
    }

使用场景

• watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据

总结

• 能用computed的地方，尽可能使用computed
• computed是计算一个新的属性，并将该属性挂载到vm上，而watch是监听已经存在且已挂载VM上的数据，所以用watch同样可以监听computed计算属性的变化
• computed本质上一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问computed属性，才会计算新的值，而watch则是当数据发生变化便会调用执行函数
• 从使用场景上说，computed使用一个数据被多个数据影响，而watch适用一个数据影响多个数据