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

vue的监视属性

news 2025/12/15 23:53:05
目录
      • 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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2025/12/12 0:52:22

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2025/11/13 13:42:14

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/12/11 3:51:27

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/12/9 4:34:53

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/11/20 14:26:29

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/12/10 6:18:55

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/12/5 1:20:46

人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

编程新知 2025/11/26 23:56:17

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2025/12/9 14:16:19