当前位置： 首页 > news >正文

vue的监视属性

news 2025/9/2 16:05:43
目录
      • 1. 场景引入
      • 2. watch
      • 3. 深度监视
      • 4. 监视属性简写
      • 5. 小结

1. 场景引入

在实际开发中，有时开发者需要根据某个属性的变化，做出相应的决策，因此Vue为开发者提供了watch.这一监视属性，用于实现此类需求。比如下面这个场景，开发者要监测天气的变化，每次点击切换天气，就会变化，要求我们对不同的天气做出不同的处理。

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button>
</div>
</body>
<script>Vue.config.productionTip = false;const vm = new Vue({el:'#root',data:{isHot:true,},computed:{info(){return this.isHot ? '炎热':'寒冷'}},methods:{changeWeather(){this.isHot = !this.isHot}},})
</script>
</html>
2. watch

我们在vm中加入watch属性，

监视属性中的函数，能够通过获取newValue和oldValue的值，进行监视到属性改变后的一些操作；

接收两个参数：

**newValue：**表示新的值

**oldValue：**表示改变前的值

在这里插入图片描述

        watch:{isHot:{handler(newValue,oldValue){console.log("天气被修改了"+newValue+oldValue);}}

我们再次尝试，控制台打印出了天气的变化

在这里插入图片描述

immediate属性

实现初始化的时候调用一次监视函数handler，默认为false

   watch:{isHot:{immediate:true,handler(newValue,oldValue){console.log("天气被修改了"+newValue+oldValue);}}

在这里插入图片描述

同时watch存在第二种写法，在vm对象外面

在这里插入图片描述

3. 深度监视

watch默认监视单层属性的改变，想实现监测多层结构需要使用deep属性

监视多级结构中某个属性的变化
watch:{ “numbers.a”:{ … } } //numbers是data上的一个key，里面包含a

这里注意：本来所监视的属性都是字符串，需要带双引号，只不过单层的省略了双引号

deep属性
用于开启深度监视，多级结构中任何一个属性值发生变化，都能够检测到（内部的改变也能够通过外部监测到），监视多级结构中所有属性的变化
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button><hr/><button @click="numbers.a++">点我a++</button><h3>{{numbers.a}}</h3><button @click="numbers.b++">点我b++</button><h3>{{numbers.b}}</h3>
</div>
</body>
<script>Vue.config.productionTip = false;const vm = new Vue({el:'#root',data:{isHot:true,numbers:{a:1,b:1,}},computed:{info(){return this.isHot ? '炎热':'寒冷'}},methods:{changeWeather(){this.isHot = !this.isHot}},watch:{numbers:{deep:true,handler(){console.log('numbers被修改');}}}

<span class="token punctuation">}</span><span class="token punctuation">)</span>

/* vm.$watch(‘isHot’,{
immediate:true,
handler(newValue,oldValue){
console.log(“天气被修改了”+newValue+oldValue);
}
})*/
</script>
</html>

在这里插入图片描述

可以看到，点击a或者b++的按钮是有被检测到的
在这里插入图片描述

4. 监视属性简写

与计算属性类似，当不需要使用其他属性，只使用handler属性时，可以使用简写形式

  isHot(newValue,oldValue){console.log("天气被修改了"+newValue+oldValue);}

函数写法：

vm.$watch('isHot',function(newValue,oldValue){console.log("天气被修改了"+newValue+oldValue);}
5. 小结

小结一下：
在这里插入图片描述

相关文章：

vue的监视属性

目录 1. 场景引入2. watch3. 深度监视4. 监视属性简写5. 小结 1. 场景引入 在实际开发中&#xff0c;有时开发者需要根据某个属性的变化&#xff0c;做出相应的决策&#xff0c;因此Vue为开发者提供了watch.这一监视属性&#xff0c;用于实现此类需求。比如下面这个场景&…...

编程日记 2024/4/11 6:22:34

外包干了15天，技术倒退明显

先说情况&#xff0c;大专毕业&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近6年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落&#xff01; 而我已经在一个企业干了四年的功能…...

编程日记 2024/4/11 6:21:33

防止邮箱发信泄露服务器IP教程

使用QQ邮箱,网易邮箱,189邮箱,新浪邮箱,139邮箱可能会泄露自己的服务器IP。 泄露原理&#xff1a;服务器通过请求登录SMTP邮箱服务器接口&#xff0c;对指定的收件人发送信息。 建议大家使用商业版的邮箱&#xff0c;比如阿里云邮箱发信等 防止邮件发信漏源主要关注的是确保邮件…...

编程日记 2024/4/11 6:20:32

鸿蒙HarmonyOS开发实战：【分布式音乐播放】

介绍 本示例使用fileIo获取指定音频文件&#xff0c;并通过AudioPlayer完成了音乐的播放完成了基本的音乐播放、暂停、上一曲、下一曲功能&#xff1b;并使用DeviceManager完成了分布式设备列表的显示和分布式能力完成了音乐播放状态的跨设备分享。 本示例用到了与用户进行交…...

编程日记 2024/4/11 6:18:30

【iOS ARKit】App 中嵌入 AR Quick Look

AR Quick Look 功能强大&#xff0c;但在应用中嵌入并使用它实现 AR体验却非常简单&#xff0c;如其他所有QuickLook使用一样&#xff0c;简单到只需要提供一个文件名就可以达到目标。 AR Quick Look 支持.usdz 和.reality 两种格式文件&#xff0c;如果在 Xcode 工程中引入了 …...

编程日记 2024/4/11 6:17:29

【Web开发】jquery图片放大镜效果制作变焦镜头图片放大

jquery图片放大镜效果制作变焦镜头图片放大实现 整体步骤流程&#xff1a; 1. 前端html实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"…...

编程日记 2024/4/11 6:16:28

RTC实时显示时间（备份电源 备份域的作用）

RTC初始化配置 系统复位后&#xff0c;可通过 PWR 电源控制寄存器 (PWR_CR) 的 DBP 位保护 RTC 寄存器以防止 非正常的写访问。必须将 DBP 位置 1 才能使能 RTC 寄存器的写访问。 上电复位后&#xff0c;所有 RTC 寄存器均受到写保护。通过向写保护寄存器 (RTC_WPR) 写入一个…...

编程日记 2024/4/11 6:15:26

【YOLOv9】完胜V8的SOTA模型Yolov9(论文阅读笔记)

官方论文地址： 论文地址点击即可跳转 官方代码地址： GitCode - 开发者的代码家园 官方代码地址点击即可跳转 1 总述 当输入数据经过各层的特征提取和变换的时候，都会丢失一定的信息。针对这一问题：...

编程日记 2024/4/11 6:14:25

学生管理系统详细需求文档

文章目录 1. 引言1.1 目的1.2 范围 2. 功能性需求2.1 用户认证2.1.1 登录 2.2 学生信息管理2.2.1 学生档案2.2.2 学籍管理 2.3 课程管理2.3.1 课程信息2.3.2 选课系统 2.4 成绩管理2.4.1 成绩录入2.4.2 成绩查询 2.5 课程进度和通知2.5.1 课程日历2.5.2 通知和提醒 2.6 学生活动…...

编程日记 2024/4/11 6:13:24

产品经理功法修炼（4）之产品管理

点击下载《产品经理功法修炼（4）之产品管理》 产品经理功法修炼（1）之自我管理 产品经理功法修炼（2）之专业技能 产品经理功法修炼（3）之产品设计 产品经理功法修炼（4）之产品管理 产品经理功法修炼（5）之团队管理 1. 前言 产品经理的能力修炼并非局限于某一技能的…...

编程日记 2024/4/11 6:12:23

【LeetCode热题100】【二叉树】二叉树展开为链表

题目链接&#xff1a;114. 二叉树展开为链表 - 力扣&#xff08;LeetCode&#xff09; 就先序遍历的顺序&#xff0c;其实就是简单的深度遍历顺序&#xff0c;装进一个容器里面再前一个后一个串连起来&#xff0c;注意容器的size是个无符号数&#xff0c;无符号数和有符号运行…...

编程日记 2024/4/11 6:11:22

云原生__K8S

createrepo --update /var/localrepo/# 禁用 firewall 和 swap [rootmaster ~]# sed /swap/d -i /etc/fstab [rootmaster ~]# swapoff -a [rootmaster ~]# dnf remove -y firewalld-*[rootmaster ~]# vim /etc/hosts 192.168.1.30 harbor 192.168.1.50 master 192.168.1.…...

编程日记 2024/4/11 6:09:20

nginx配置证书和私钥进行SSL通信验证

文章目录 一、背景1.1 秘钥和证书是两个东西吗&#xff1f;1.2 介绍下nginx配置文件中参数ssl_certificate和ssl_certificate_key1.3介绍下nginx支持的证书类型1.4 目前nginx支持哪种证书格式&#xff1f;1.5 nginx修改配置文件目前方式也会有所不同1.6 介绍下不通格式的证书哪…...

编程日记 2024/4/11 6:08:19

【面试题】微博、百度等大厂的排行榜如何实现？

背景 现如今每个互联网平台都会提供一个排行版的功能&#xff0c;供人们预览最新最有热度的一些消息&#xff0c;比如百度&#xff1a; 再比如微博&#xff1a; 我们要知道&#xff0c;这些互联网平台每天产生的数据是非常大&#xff0c;如果我们使用MySQL的话&#xff0c;db实…...

编程日记 2024/4/11 6:07:18

com.intellij.diagnostic.PluginException 问题

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业变现、人工智能等&#xff0c;希望大家多多支持。 未经允许不得转载 目录 一、导读二、 推荐阅读 一、导读 遇到…...

编程日记 2024/4/11 6:06:17

Altair® （澳汰尔）Inspire™ Render —— 强大的 3D 渲染和动画工具

Inspire Render 是一种全新 3D 渲染和动画工具&#xff0c;可供创新设计师、建筑师和数字艺术家以前所未有的速度快速制作精美的产品演示。 借助基于物理特性的内置高品质全局照明渲染引擎 Thea Render&#xff0c;可以快速创建、修改和拖放各种材质并添加照明环境&#xff0c…...

编程日记 2024/4/11 6:05:16

虚幻引擎启动报错记录

0x00007FFEF0C8917C (UnrealEditor-CoreUObject.dll)处(位于 UnrealEditor.exe 中)引发的异常: 0xC0000005: 写入位置 0x0000000000000030 时发生访问冲突。 解决办法&#xff1a;首先查看堆栈信息&#xff0c;我的项目启动是因为默认场景编译不过&#xff0c;进到编辑器配置文…...

编程日记 2024/4/11 6:03:14

最祥解决python 将Dataframe格式数据上传数据库所碰到的问题

碰到的问题 上传Datafrane格式的数据到数据库 会碰见很多错误 举几个很普遍遇到的问题(主要以SqlServer举例) 这里解释下 将截断字符串或二进制数据 这个是字符长度超过数据库设置的长度 然后还有字符转int失败 或者字符串转换日期/或时间失败 这个是碰到的需要解决的最多的问…...

编程日记 2024/4/11 6:02:13

【汇编语言实战】统计个数

已知10个分布在0至100内的正整数&#xff0c;统计大于等于60的数的个数和小于60的数的个数 C语言描述该程序流程&#xff1a; #include <stdio.h> int main() {int arr1[]{11,33,73,52,93,84,67,56,64,75};int num10;for(int i1;i<10;i){if(arr1[i]>60){num1;}}p…...

编程日记 2024/4/11 6:01:12

SQLite数据库概述及在Java中的应用

## 什么是SQLite数据库&#xff1f; SQLite是一种轻量级的数据库管理系统&#xff0c;它不需要一个独立的服务器进程或操作系统的运行&#xff0c;而是将整个数据库&#xff0c;包括定义、表、索引以及数据本身&#xff0c;全部存储在一个独立的磁盘文件中。SQLite的设计理念是…...

编程日记 2024/4/11 6:00:10

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/8/29 23:17:15

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/7/21 15:40:47

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/8/31 0:55:30

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2025/8/24 19:36:37

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2025/8/23 3:14:32

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2025/6/20 15:59:42

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/8/9 23:42:13

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

编程新知 2025/8/29 6:37:18

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2025/8/28 16:31:47

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2025/6/15 23:06:39