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

Vue基础(8)_监视属性、深度监视、监视的简写形式

article 2025/10/3 20:48:19

监视属性(watch)：

1.当被监视的属性变化时，回调函数(handler)自动调用，进行相关操作。
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视

handler
在Vue中，handler方法是用于处理监听属性变化的函数。它通常与watch属性一起使用，用于监控数据的变化并执行相应的操作。handler方法可以帮助我们将处理逻辑抽象出来，以便复用和维护。
可传递参数：
newValue、oldValue（参数名可以自定义），但是第一个是修改后的属性值，第二个是原先的属性值

immediate(布尔值)
immediate：立即的、马上的、立刻执行的。默认为 false。
作用：初始化时让handler先调用一下。

深度监视(deep)：
(1).Vue中的watch默认不监测对象内部值的改变。
(2).配置deep:true可以监测对象内部值改变(多层级结构监视)。

备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

监视的简写形式
前提条件：不需要immediate和deep属性，只需要handler时可简写。

watch:{isHot(){....}
}

或者：

vm.$watch("isHot", function(){...
})

举例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><script type="text/javascript" src="../js/vue.js"></script><title>天气案例</title>
</head>
<body><div id="root"><h2>今天天气很{{info}}</h2><!-- 绑定事件的时候：@xxx = "yyy" 中的 yyy 可以写一些简单的语句 --><!-- 下面的语句可简写成： <button @click = isHot = !isHot;>改变天气</button> --><button @click=changeWeacher>改变天气</button><h2>a的值是：{{numbers.a}}</h2><button @click="numbers.a++">点一次加1</button></div>
</body>
<script>const vm = new Vue({el: "#root",data: {isHot: true,numbers: {a: 1,b: 1}},computed: {info() {return this.isHot ? '炎热' : '凉爽';}},methods: {changeWeacher() {this.isHot = !this.isHot;}},watch: {// 监视计算属性的变化（info）info: {// 初始化时让handler调用一下。immediate：立即的、马上的、立刻执行的。immediate: true,// handler什么时候调用？当info发生改变时。handler(newValue, oldValue) {console.log("info被修改了, 新值为：" + newValue, "旧值：" + oldValue)}},// 监视多级结构中某个属性的变化（numbers.a）'numbers.a': {handler(newValue, oldValue) {console.log("a的值改变了,新值为：" + newValue, "旧值：" + oldValue)}},// 监视多级结构中所有属性的变化（numbers.a、numbers.b等等）'numbers': {// 深度监视开启deep: true,handler() {console.log("numbers对象里有的值改变了")}}}})// 正常写法vm.$watch('isHot', {// immediate: true,// deep:true,handler(newValue, oldValue) {console.log("监视isHot变化", "新值为：" + newValue, "旧值：" + oldValue)}})// 简写形式vm.$watch('isHot',function (newValue, oldValue) {console.log("【监视isHot值，代码简写】", "新值为：" + newValue, "旧值：" + oldValue)})// 以上监视numbers.a的简写形式// 'numbers.a'(newValue, oldValue) {//     console.log("【监视a值代码简写】新值为：" + newValue, "旧值：" + oldValue)// },
</script>
</html>

点击 “改变天气” 后。。。

点击  “点一次加1” 后 。。。

相关文章：

Vue基础(8)_监视属性、深度监视、监视的简写形式

监视属性(watch)&#xff1a; 1.当被监视的属性变化时&#xff0c;回调函数(handler)自动调用&#xff0c;进行相关操作。 2.监视的属性必须存在&#xff0c;才能进行监视&#xff01;&#xff01; 3.监视的两种写法&#xff1a; (1).new Vue时传入watch配置 (2).通过vm.$watc…...

编程日记 2025/9/25 0:23:04

计算机网络八股文--day1

从浏览器输入url到显示主页的过程&#xff1f; 1. 浏览器查询域名的IP地址 2. 浏览器和服务器TCP三次握手 3. 浏览器向服务器发送一个HTTP请求 4. 服务器处理请求&#xff0c;返回HTTP响应 5. 浏览器解析并且渲染页面 6. 断开连接 其中使用到的协议有DNS协议&#xff08…...

编程日记 2025/7/6 15:28:19

TCP IP

TCP/IP 通信协议&#xff0c;不是单一协议&#xff0c;是一组协议的集合 TCP IP UDP 1.建立链接 三次握手 第一步&#xff1a;客户端发送一个FIN报文&#xff0c;SEQX,等待服务器回应 第二步&#xff1a;服务器端受到&#xff0c;发送ackx1,seqy, 等待客户端回应 第三步&am…...

编程日记 2025/9/20 0:51:23

CNG汽车加气站操作工岗位职责

CNG&#xff08;压缩天然气&#xff09;汽车加气站操作工是负责天然气加气设备操作、维护及安全管理的重要岗位。以下是该岗位的职责、技能要求、安全注意事项及职业发展方向的详细说明&#xff1a; *主要职责 加气操作 按照规程为车辆加注CNG&#xff0c;检查车辆气瓶合格证…...

编程日记 2025/7/6 15:28:15

（四）毛子整洁架构（Presentation层/Authentiacation/Authorization）

文章目录 项目地址一、Presentation 层1.1 数据库migration1. 添加数据库连接字符串2. 创建自动Migration/Seed3.修改Entity添加private 构造函数4. 执行迁移 1.2 全局错误处理中间件1.3 Controller 添加1. Apartments2. Bookings3. 测试 二、Authentiacation2.1 添加Keycloak服…...

编程日记 2025/10/3 3:01:53

K8S服务的请求访问转发原理

开启 K8s 服务异常排障过程前&#xff0c;须对 K8s 服务的访问路径有一个全面的了解&#xff0c;下面我们先介绍目前常用的 K8s 服务访问方式&#xff08;不同云原生平台实现方式可能基于部署方案、性能优化等情况会存在一些差异&#xff0c;但是如要运维 K8s 服务&#xff0c;…...

编程日记 2025/9/20 0:51:07

5.1 神经网络: 层和块

1 层&#xff08;Layer&#xff09; 1.1 定义 层是深度学习模型中的基本构建单元&#xff0c;它由一组神经元组成&#xff0c;负责对输入数据进行特定的数学运算和变换&#xff0c;以提取数据的某种特征或表示。每一层可以看作是一个函数&#xff0c;它接收输入数据&#xff…...

编程日记 2025/8/8 0:25:56

20250510解决NanoPi NEO core开发板在Ubuntu core22.04.3系统下适配移远的4G模块EC200A-CN的问题

1、h3-eflasher-friendlycore-jammy-4.14-armhf-20250402.img.gz 在WIN10下使用7-ZIP解压缩/ubuntu20.04下使用tar 2、Win32DiskImager.exe 写如32GB的TF卡。【以管理员身份运行】 3、TF卡如果已经做过会有3个磁盘分区&#xff0c;可以使用SD Card Formatter/SDCardFormatterv5…...

编程日记 2025/9/29 20:56:39

Linux系统之----模拟实现shell

在前面一个阶段的学习中&#xff0c;我们已经学习了环境变量、进程控制等等一系列知识&#xff0c;也许有人会问&#xff0c;学这个东西有啥用&#xff1f;那么&#xff0c;今天我就和大家一起综合运用一下这些知识&#xff0c;模拟实现下shell&#xff01; 首先我们来看一看我…...

编程日记 2025/10/2 16:29:06

2025年数维杯赛题C题专家 组委会C题专家疑集锦

1、段前段后距&#xff0c;行间距有要求嘛 C题专家&#xff1a;一般是单倍行距 2、请问参考文献和附录上方也要有图示页眉吗?ai使用报告放在附录里还是附录之后? C题专家:附录 3、第三问的那个三天都在一个城市可以吗?这样我们列两份城市的清明自由行&#xff0c;还是说…...

编程日记 2025/6/19 1:12:04

TCP黏包解决方法

1. 问题描述 TCP客户端每100ms发送一次数据，每次为16006字节的数据长度。由于TCP传输数据时，为了达到最佳传输效能，数据包的最大长度需要由MSS限定（MSS就是TCP数据包每次能够传输的最大数据分段），超过这个长度会进行自动拆包。也就是说虽然客户端一次发送16006字节数据，…...

编程日记 2025/9/20 0:50:46

vue访问后端接口，实现用户注册

文章目录 一、后端接口文档二、前端代码请求响应工具调用后端API接口页面函数绑定单击事件&#xff0c;调用/api/user.js中的函数 三、参考视频 一、后端接口文档 二、前端代码 请求响应工具 /src/utils/request.js //定制请求的实例//导入axios npm install axios import …...

编程日记 2025/9/24 13:06:34

[原创](现代Delphi 12指南):[macOS 64bit App开发]: 如何获取自身程序的所在的目录?

[作者] 常用网名: 猪头三 出生日期: 1981.XX.XX 企鹅交流: 643439947 个人网站: 80x86汇编小站 编程生涯: 2001年~至今[共24年] 职业生涯: 22年 开发语言: C/C++、80x86ASM、Object Pascal、Objective-C、C#、R、Python、PHP、Perl、 开发工具: Visual Studio、Delphi、XCode、…...

编程日记 2025/6/4 9:38:28

Nginx性能调优与深度监控

目录 1更改进程数与连接数 &#xff08;1&#xff09;进程数 &#xff08;2&#xff09;连接数 2&#xff0c;静态缓存功能设置 &#xff08;1&#xff09;设置静态资源缓存 &#xff08;2&#xff09;验证静态缓存 3&#xff0c;设置连接超时 4&#xff0c;日志切割 …...

编程日记 2025/9/24 13:15:32

机器学习第四讲：无监督学习 → 给无标签积木自由组合，发现隐藏规律

机器学习第四讲&#xff1a;无监督学习 → 给无标签积木自由组合&#xff0c;发现隐藏规律 资料取自《零基础学机器学习》。 查看总目录&#xff1a;学习大纲 关于DeepSeek本地部署指南可以看下我之前写的文章&#xff1a;DeepSeek R1本地与线上满血版部署&#xff1a;超详细…...

编程日记 2025/6/6 19:20:23

2025年5月计划（linux+Gpu精粹催眠+UE独立游戏）

终于步入正轨了&#xff0c;4月份为了各种面试&#xff0c;一会学这&#xff0c;一会学那。 现在&#xff0c;有大量的业余时间了&#xff0c;也该干点正事了。 按照规划&#xff0c; 1&#xff0c;ue独立游戏&#xff08;十分钟的视频即可&#xff09; 2&#xff0c;linux-&…...

编程日记 2025/9/21 19:49:15

如何在大型项目中解决 VsCode 语言服务器崩溃的问题

在大型C/C项目中&#xff0c;VS Code的语言服务器&#xff08;如C/C扩展&#xff09;可能因内存不足或配置不当频繁崩溃。本文结合系统资源分析与实战技巧&#xff0c;提供一套完整的解决方案。 一、问题根源诊断 1.1 内存瓶颈分析 通过top命令查看系统资源使用情况&#xff…...

编程日记 2025/9/20 0:49:54

从爬虫到网络---＜基石9＞ 在VPS上没搞好Docker项目,把他卸载干净

1.停止并删除所有正在运行的容器 docker ps -a # 查看所有容器 docker stop $(docker ps -aq) # 停止所有容器 docker rm $(docker ps -aq) # 删除所有容器如果提示没有找到容器&#xff0c;可以忽略这些提示。 2.删除所有镜像 docker images # 查看所有镜像 dock…...

编程日记 2025/9/19 18:22:51

AutoDL实现端口映射与远程连接AutoDL与Pycharm上传文件到远程服务器(李沐老师的环境)

文章目录 以上配置的作用前提AutoDL实现端口映射远程连接AutoDLPycharm上传文件到远程服务器以上配置的作用 使用AutoDL的实例:因本地没有足够强的算力,所以需要使用AutoDL AutoDL端口映射:当在实例上安装深度学习的环境,但因为实例的linux系统问题,无法图形化显示d2l中的文件…...

编程日记 2025/9/25 2:30:44

LeetCode 热题 100 24. 两两交换链表中的节点

LeetCode 热题 100 | 24. 两两交换链表中的节点 大家好&#xff0c;今天我们来解决一道经典的链表问题——两两交换链表中的节点。这道题在 LeetCode 上被标记为中等难度&#xff0c;要求两两交换链表中的相邻节点&#xff0c;并返回交换后链表的头节点。 问题描述 给你一个链…...

编程日记 2025/6/8 22:32:52

13.thinkphp的Session和cookie

一&#xff0e;Session 1. 在使用Session之前&#xff0c;需要开启初始化&#xff0c;在中间件文件middleware.php&#xff1b; // Session 初始化 \think\middleware\SessionInit::class 2. TP6.0不支持原生$_SESSION的获取方式&#xff0c;也不支持session_开头的函数&…...

编程日记 2025/9/27 9:50:48

好用的播放器推荐

以下是一些好用的播放器推荐&#xff0c;按照不同平台和使用场景分类&#xff1a; 电脑端 VLC Media Player 特点&#xff1a;开源、跨平台&#xff0c;支持几乎所有的音视频格式&#xff0c;无需额外安装解码器。具备强大的功能&#xff0c;如播放列表管理、视频和音频滤镜、…...

编程日记 2025/7/16 10:01:18

多线程获取VI模块的YUV数据

一.RV1126 VI模块采集摄像头YUV数据的流程 step1&#xff1a;VI模块初始化 step2&#xff1a;启动VI模块工作 step3&#xff1a;开启多线程采集VI数据并保存 1.1初始化VI模块&#xff1a; VI模块的初始化实际上就是对VI_CHN_ATTR_S的参数进行设置、然后调用RK_MPI_VI_SetC…...

编程日记 2025/9/24 20:10:16

[ctfshow web入门] web68

信息收集 highlight_file被禁用了&#xff0c;使用cinclude("php://filter/convert.base64-encode/resourceindex.php");读取index.php&#xff0c;使用cinclude("php://filter/convert.iconv.utf8.utf16/resourceindex.php");可能有些乱码&#xff0c;不…...

编程日记 2025/9/20 0:49:35

深入浅出 JDBC 与数据库连接池

在Java开发中&#xff0c;与数据库进行交互是几乎每个项目都离不开的功能。JDBC&#xff08;Java DataBase Connectivity&#xff09;作为Java操作数据库的标准规范&#xff0c;为开发者提供了底层的数据库访问支持。而数据库连接池则是提高数据库操作效率和性能的重要工具。本…...

编程日记 2025/9/25 15:51:04

16前端项目----交易页

交易 交易页Trade修改默认地址商品清单reduce计算总数和总价应用 统一引入接口提交订单 交易页Trade 在computed中mapState映射出addressInfo和orderInfo&#xff0c;然后v-for渲染到组件当中 修改默认地址 <div class"address clearFix" v-for"address in …...

编程日记 2025/9/29 22:51:32

Python时间模块

time 和 datetime 是 Python 中处理时间的两个重要模块&#xff0c;它们提供了不同的功能来处理时间相关的操作。 time模块 time 模块主要提供与系统时间相关的基础功能&#xff0c;侧重于时间戳和简单的时间格式处理。 time.time()&#xff1a;返回当前时间的时间戳&#xf…...

编程日记 2025/9/29 22:47:35

2003-2020年高铁线路信息数据

2003-2020年高铁线路信息数据 1、时间&#xff1a;2003-2020年 2、来源&#xff1a;Chinese High-speed Rail and Airline Database&#xff0c;CRAD 3、指标&#xff1a;高铁线路名称、起点名、终点名、开通时间、线路长度(km)、设计速度(km/h&#xff09;、沿途主要车站 …...

编程日记 2025/9/29 23:11:40

mac u盘重装mac10.15Catalina系统

我的电脑提mac2017的air 重装过程 (文件夹中间有空格时为 Install\ macOS\ Catalina 才行) &#xff08;有需要的&#xff0c;最好做一下备份&#xff0c;有些东西可以及时找到配置和文件之类的&#xff0c; u盘制作是在mac电脑上操作的) 一、先下载系统镜像文件或自行到官方…...

编程日记 2025/9/29 13:39:31

MySQL COUNT(*) 查询优化详解！

目录 前言1. COUNT(*) 为什么慢&#xff1f;—— InnoDB 的“计数烦恼” &#x1f914;2. MySQL 执行 COUNT(*) 的方式 (InnoDB)3. COUNT(*) 优化策略&#xff1a;快&#xff01;准&#xff01;狠&#xff01;策略一&#xff1a;利用索引优化带 WHERE 子句的 COUNT(*) (最常见且…...

编程日记 2025/9/25 10:08:28