3——VUE侦听器和计算属性

一、普通方法

格式：

methods:{
      方法名（形参）{
          方法体；
      }
}

二、侦听器 Watch

问题：用普通方法实现不了对数据进行时刻关注

解决：watch侦听，实现对数据时刻监控，一旦数据发生改变立马会有反应

1、写法：

 //写法一：类似于函数
 watch:{
        a(val){
                this.c=val+this.b;
        },
        b(val){
                this.c=val+this.a;
        }
       
    }

//写法二：类似于对象写法（复杂数据类型建议使用此方法）
watch:{
        b:{
          handler(val){
            console.log(val);
        }
    }
       
    } 

注意：

1、侦听器他和普通方法同级

2、侦听器必须侦听的是data中的数据，否则会报错

2、立即监听：都是使用对象写法通过handler处理函数immediate:true实现立即监听

//普通数据   
 b:{
            handler(newname,oldname){
              console.log(newname,oldname)
            },
           immediate:true,               
        },
  //复杂数据
        'obj.name':{
             handler(newname,oldname){
               console.log(newname,oldname)
            },
           immediate:true,
        }
       

3、深度监听 deep:true

//深度监听可以监听到对象的所有属性
    obj:{
             handler(newname,oldname){
              console.log(newname,oldname)
            },
           immediate:true,
           deep:true

        }

三、计算属性Computed

1、概述

在Vue组件中，通过在computed对象中定义计算属性的名称及对应的计算函数来创建计算属性。计算函数会返回计算属性的值

计算属性：计算data中的数据得到一个结果，影响结果的数据将都会被监听

格式：

 computed:{
    c(){
      return this.a+this.b;  （a和b是data中的数据）
    }
  }

注意：

1.计算属性的结果是通过计算属性得来的，所以会时刻进行对data中相关数据的监听

2.计算属性的结果不能出现在data中

总结：computed会初始化（页面打开会被执行一次），computed有缓存机制，监听数据无变化会走缓存

四、watch和computed的不同

相同：

1、都可以监听数据

2、watch和computed与methods都是同级

不同：

1、computed 有缓存

2、watch 只可以监听一个data中的数据，computed可以监听多个或一个

3、watch监听的数据必须是data中声明的，computed计算属性不可以在data中声明

4、computed中有get和set方法

5、watch支持异步，computed不支持异步