vue的计算属性和侦听器

计算属性computed

计算属性用来处理数据，解决代码的冗余。
用法：当一些数据需要通过计算才能得到，我们一般放在计算属性中处理，减少在标签内执行。会进行数据的缓存，减少代码的冗余，还有多个计算属性可以共享。
计算属性需要在computed(){} 里面声明，方法名为属性值，返回值为计算属性的属性值。

computed:{
变量名（）{
return this.//一大堆需要计算的数据比如翻转数组
}
}

计算属性有两个方法，get()，set(),
一般情况下我们只会使用get()方法，所以我们基本上用简洁的方式

computer(){
     myclass(){
         return "张三"
     }
 }

get () {}:当需要读取当前属性值时调用,根据相关的数据计算并返回当前属性的值(取值时调用)
set（）{} 方法的执行，当我们计算属性监听当前的属性值发生变化的时候，才会执行set方法，从而修改相对应的属性值。(重新赋值时调用)

computer(){ 
     myclass:{
       get(){return "张三"}，
        set(){this.myliterclass="李四"}
   }
 }

侦听器 watch

监听data中的某一个数据变化
1：值类型

            watch:{
                '要侦听的属性名'(newVal,oldVal){
                // 数据变化后进行一些操作
                }
            }

2：引用类型

watch:{
data属性(new,old){
deep：true//开启深度侦听，无论数据多少层嵌套都可以监听
immediate:true,//立即执行
handler(){
//写需要处理的操作
}
}}

计算属性和侦听器区别

1：计算属性是解决代码的冗余，侦听器是监听数据data的变化
2：计算属性里面不可以进行异步操作，侦听器方法里面可以进行异步操作
3：计算属性又缓存机制，侦听器没有
4：计算属性是可以在data中新增一个值，在标签内直接使用计算属性的属性值。侦听器侦听的属性值必须在data中定义