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

一、普通方法

格式:

javascript 复制代码
methods:{
      方法名(形参){
          方法体;
      }
}

二、侦听器 Watch

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

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

1、写法:

javascript 复制代码
 //写法一:类似于函数
 watch:{
        a(val){
                this.c=val+this.b;
        },
        b(val){
                this.c=val+this.a;
        }
       
    }
javascript 复制代码
//写法二:类似于对象写法(复杂数据类型建议使用此方法)
watch:{
        b:{
          handler(val){
            console.log(val);
        }
    }
       
    } 

注意:

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

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

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

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

3、深度监听 deep:true

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

        }

三、计算属性Computed

1、概述

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

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

格式:

javascript 复制代码
 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不支持异步

相关推荐
花海如潮淹4 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui