记录---计算属性(computed)与侦听器(watch)的用法

一、计算属性computed

1.概念：处理数据用来解决代码的冗余

1、计算属性的语法：       

        ①一定要在vue实例的对象computed中声明一个函数

        ②这个函数的返回值return就是计算属性的属性值

        ③template中调用计算属性的变量时不需要写()直接放进插值表达式就可被解析

2、计算属性的缓存机制（提高性能）：

        ①计算属性在第一次使用时，会执行一次函数体，之后就会将返回值缓存起来

        ②下一次使用计算属性的时候，不会执行这个函数，而是直接从缓存中读取

        ③只有当计算属性中的数据发生变化时，这个函数才会重新执行一次

 2.写法（getter、setter）：

 ①默认get()方法，仅是获取值（注意:不能修改值）

computed：{
    变量名：{
        get(){
            return this.XXX + this.YYY   //计算得出的数据，返回值为变量名的值
        }
    }
}

// 如果只需要获取值而不需要改变值，则可以简化写
computed：{
    变量名(){
        return this.XXX + this.YYY   //返回值为变量名的值
    }
}

 ②set()方法，具有修改属性的功能

 computed: {
    变量名: {
         get() {
            return this.XXX + this.YYY //返回值为变量名的值
         }, 
         set(val) {
            console.log(val); // set的形参val是变量名当前的显示值
         }
    }
}

 这里举个例子：多选项的全选和半选（只大概写一下思路）

 如图：变量名为全选按钮双向绑定的字段 allCheck（值只能为true或false）

         get()的返回值为Boolean型。遍历所有的选项，全部选中返回true，否则为false。这样每个选项都选中的话，全选按钮就是选中状态；如果有一个选项未被选中，全选按钮就是未选中状态。

        set(val)中val的值就是全选按钮状态值。遍历每一项，val的值是true，则让每一个选项的状态都是true，即选中状态。反之，val的值是false，则让每一个选项的状态都是false，即未选中状态。

二、侦听器watch

1.概念：监听data中的某一个数据变化

2.写法（值类型、引用类型）：

①值类型

watch:{
    data中类型为数值的数据(newVal,oldVal){
        // 一系列操作
        // newVal：新值    oldVal：旧值
    }
}

②引用类型

watch:{
    data中类型为引用类型的数据(newVal,oldVal){
        deep：true; //开启深度侦听
        immediate:true; //初始化时调用一次 
        handler(){
            //写需要处理的操作
            // newVal：新值    oldVal：旧值
        }
    }
}

计算属性与侦听属性的区别：
        (1)功能不同，计算属性用于解决模板冗余问题。侦听器侦听data中某一个数据变化

        (2)计算属性具有缓存机制，侦听器没有缓存机制

        (3)计算属性不支持异步操作，侦听器支持异步操作

        (4)计算属性可以给vue新增属性，侦听器是 data中已有属性

        (5)计算属性只要使用了就会执行一次，侦听器默认只有第一次改变才会执行

注意：computed能完成的功能，watch都可以完成；watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

补充小知识： 

1、所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。

2、所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。