您现在的位置是:首页 > 正文

vue watch监听对象及对应值的变化

2024-01-30 21:27:26阅读 0
var vm=new Vue({
    data:{
        a:1,
        b:{
            c:1
        }
    },
    watch:{
        a(val, oldVal){//普通的watch监听
            console.log("a: "+val, oldVal);
        },
        b:{//深度监听,可监听到对象、数组的变化
            handler(val, oldVal){
                console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的
            },
            deep:true
        }
    }
})
vm.a=2
vm.b.c=2

a是一个普通的值,当a的值变化时会被监听到,b是一个对象,不能直接像a那么写,需要深度监听才能捕捉到,但是当我想去捕捉b对象中某一个值的变化时却发现,打印出来的两个值是不一样的,如图:

这里写图片描述

这样就只能知道对象发生变化却不知道具体哪个值发生了变化,如果想监听对象某一个值得变化可以利用计算属性computed

var vm=new Vue({
    data:{
        b:{
            c:1
        }
    },
    watch:{
        newValue(val, oldVal){
            console.log("b.c: "+val, oldVal);
        }
    },
    computed: {
      newValue() {
        return this.b.c
      }
    }
})
vm.b.c=2

用watch去监听computed计算过的值就可以直接知道是哪个对应的值发生了变化,结果如图:
这里写图片描述

网站文章

  • 各位大侠门,遇到这种抉择,你会怎么选择!

    如果有一个公司给你2w一个月,但是去维护一个用webform做的项目,并且就只有你一个人维护,项目规模比较大,项目是针对中国和国外市场交易的平台,但是旧项目大概一年以后不会再使用,会换成java版本,...

    2024-01-30 21:26:47
  • 免费分享嵌入式stm32基础项目开发:心率检测仪的设计与实现

    本教程主要给大家谅解了嵌入式stm32开发 心率检测仪的设计与实现,需要的朋友们可以下载来看看,作为参考!项目描述:通过心律传感器采集我们的心律数据,然后通过串口传送到上位机中,上位机用Qt实现,当Qt接收数据之后,把数据绘制曲线,并计算显示心率心律波形。适合人群:零基础学员;在校大学生、应届毕业生、IT爱好者、跳槽换工作者、其他行业人员。课程内容:1:心律传感器简介及adc的原理

    2024-01-30 21:26:40
  • CentOS7安装docker

    1、yum更新sudo yum update2、安装需要的软件包,yum-util提供yum-config-manager功能,另外两个是devicemapper驱动依赖的sudo yum install -y yum-utils device-mapper-persistent-data lvm23、设置yum源为阿里云sudo yum-config-manager --add-r...

    2024-01-30 21:26:33
  • 总结每天10问之Java基础1

    Java 基础OOP相关1、什么是B/S架构?什么是C/S架构答:B/S中B是Brower,浏览器的意思;S是Server,即Brower/Server,用户通过浏览器访问服务。C/S中C是Clien...

    2024-01-30 21:26:06
  • C#将word文档转为PDF

    C#将word文档转为PDF

    C#将word文档转为PDF

    2024-01-30 21:26:00
  • 2021-09-29

    2021-09-29

    小程序时间刻度尺组件库(vue通用) 实现效果:页面进来的时间 刻度尺当前时间点 以前表示不可预约 样式为红色 时间点之后的样式为蓝色 Demo效果: 实现思路:刻度尺上面的小刻度数用循环遍历出来的 ...

    2024-01-30 21:25:54
  • 如何设计更优的分布式锁?

    如何设计更优的分布式锁?

    如何设计更优的分布式锁?

    2024-01-30 21:25:19
  • Android JNI学习-异常处理

    异常我们已经很熟悉了,空指针、数组越界等等,在Java中,当抛出一个异常,虚拟机会停止执行代码块并进入调用栈反向检查能处理特定异常的异常处理程序代码块,虚拟机清除异常并将控制权交给异常处理程序。而JN...

    2024-01-30 21:25:12
  • Kafka学习笔记之K8S内filebeat传输到kafka报错带解决方案

    Kafka学习笔记之K8S内filebeat传输到kafka报错带解决方案

    0x00 概述filebeat非常轻量级,正常情况下占用的资源几乎都能忽略不计,但是部署后发现资源占用很大,所以怀疑是filebeat本身出了问题。第一时间查看filebeat日志(默认路径/var/log/filebeat/filebeat,K8S需要在控制台实时查看pod的日志),发现有大量内容输出:2019-03-20T08:55:02.198+0800 IN...

    2024-01-30 21:25:07
  • PgSQL · 追根究底 · WAL日志空间的意外增长

    PgSQL · 追根究底 · WAL日志空间的意外增长

    问题出现我们在线上巡检中发现,一个实例的pg_xlog目录,增长到4G,很是疑惑。刚开始怀疑是日志归档过慢,日志堆积在pg_xlog目录下面,未被清除导致。于是检查归档目录下的文件,内容如下。但发现新近完成写入的日志文件都被归档成功了(即在pg_xlog/archive_status里面,有对应的xxx.done文件)。ls -lrt pg_xlog...-rw------- ...

    2024-01-30 21:24:38