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不支持异步

相关推荐
daols884 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水7 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐7 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue