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

前端vue监听 -watch

news 来源：原创 2025/7/24 9:18:22

前端vue监听 -watch

- 前言
- 基本用法
- - 监听简单数据属性
  - 监听对象属性
- 高级用法
- - 深度监听对象
  - 即时触发监听
  - 监听计算属性
- 注意事项

前言

在 Vue.js 里，watch 选项可用于响应式地监听数据的变化，当被监听的数据发生改变时，就会触发相应的回调函数来执行特定操作。下面从基本用法、高级用法以及注意事项等方面详细讲解 watch。

基本用法

监听简单数据属性

监听一个简单的数据属性时，在 watch 对象中使用与数据属性同名的键，对应的值为一个回调函数。该 回调函数接收两个参数 ：新值和旧值。

<template><div><input v-model="message" placeholder="请输入内容"><p>当前输入内容：{{ message }}</p></div>
</template><script>
export default {data() {return {message: ''};},watch: {message(newValue, oldValue) {console.log(`新值: ${newValue}, 旧值: ${oldValue}`);}}
};
</script>

在这个例子中，每当 message 的值改变时，回调函数就会被触发，同时会在控制台打印出新值和旧值。

监听对象属性

如果要监听对象的某个属性，可使用字符串形式的路径来指定要监听的属性。

<template><div><input v-model="user.name" placeholder="请输入姓名"><p>当前姓名：{{ user.name }}</p></div>
</template><script>
export default {data() {return {user: {name: ''}};},watch: {'user.name'(newValue, oldValue) {console.log(`新姓名: ${newValue}, 旧姓名: ${oldValue}`);}}
};
</script>

这里监听了 user 对象的 name 属性，当 name 改变时，会在控制台输出相应信息。

高级用法

深度监听对象

若要监听对象内部所有属性的变化，需使用深度监听，通过设置 deep: true 来实现。

<template><div><input v-model="user.name" placeholder="请输入姓名"><input v-model="user.age" placeholder="请输入年龄"><p>当前姓名：{{ user.name }}, 当前年龄：{{ user.age }}</p></div>
</template><script>
export default {data() {return {user: {name: '',age: ''}};},watch: {user: {handler(newValue, oldValue) {console.log('用户信息已更新');},deep: true}}
};
</script>

只要 user 对象的任何属性发生变化，handler 函数就会被触发。不过要注意，深度监听会遍历对象的所有属性，可能会对性能产生一定影响。

即时触发监听

有时希望 在组件挂载时就立即触发一次监听函数，可使用 immediate: true 选项。

<template><div><input v-model="message" placeholder="请输入内容"><p>当前输入内容：{{ message }}</p></div>
</template><script>
export default {data() {return {message: ''};},watch: {message: {handler(newValue, oldValue) {console.log(`新值: ${newValue}, 旧值: ${oldValue}`);},immediate: true}}
};
</script>

在这个例子中，组件挂载时就会执行一次 handler 函数。

监听计算属性

除了监听数据属性，还能监听计算属性。当计算属性依赖的数据发生变化，导致计算属性的值改变时，监听函数会被触发。

<template><div><input v-model="firstName" placeholder="请输入名字"><input v-model="lastName" placeholder="请输入姓氏"><p>全名：{{ fullName }}</p></div>
</template><script>
export default {data() {return {firstName: '',lastName: ''};},computed: {fullName() {return `${this.firstName} ${this.lastName}`;}},watch: {fullName(newValue, oldValue) {console.log(`新全名: ${newValue}, 旧全名: ${oldValue}`);}}
};
</script>

当 firstName 或者 lastName 发生变化，fullName 也会改变，此时监听函数会被触发。

注意事项

性能影响：深度监听会递归遍历对象的所有属性，当对象结构复杂时，可能会对性能造成较大影响。所以在使用深度监听时，要谨慎考虑。
旧值问题：在深度监听对象时，oldValue 和 newValue 可能指向同一个对象，因为它们都是对象的引用。如果需要对比对象的前后状态，可以在 handler 函数中进行深拷贝。
销毁监听：在组件销毁时，Vue 会自动销毁 watch 监听。但如果使用了 $watch 方法手动创建监听，需要在组件销毁前手动调用 unwatch 函数来销毁监听，避免内存泄漏。

综上所述，watch 是 Vue.js 中一个非常实用的特性，合理使用它可以方便地处理数据变化时的逻辑。

前端vue监听 -watch

前端vue监听 -watch 前言基本用法监听简单数据属性监听对象属性高级用法深度监听对象即时触发监听监听计算属性注意事项前言在 Vue.js 里，watch 选项可用于响应式地监听数据的变化，当被监听的数据发生改变时，就会触发相应的回调函数来执…...

编程日记 2025/7/24 9:18:22

Linux之信号

目录一、预备知识二、信号的产生一、键盘产生信号二、系统调用三、调用系统命令向进程发信号 kill 四、硬件异常五、软件条件三、信号的保存四、信号的处理一、预备知识 1.信号！信号量。两者没有任何关系 2.什么是信号？ 定义一&…...

编程日记 2025/7/24 9:16:25

微软Edge浏览器字体设置

前言时间：2025年4月自2025年4月起，微软Edge浏览器的默认字体被微软从微软雅黑替换成了Noto Sans，如下图。Noto Sans字体与微软雅黑风格差不多，但在4K以下分辨率的显示器上较微软雅黑更模糊，因此低分辨率的显示器建议…...

编程日记 2025/7/22 9:03:21

Java中关于编译（Compilation）、类加载（Class Loading）和运行（Execution）的详细区别解析

以下是Java中编译（Compilation）、类加载（Class Loading） 和运行（Execution） 的详细区别解析： 1. 编译（Compilation） 定义将Java源代码（.java文件&#x…...

编程日记 2025/7/23 13:11:25

[python] set

1.添加元素在 Python 中，向 set 添加一个元素可以使用 add() 方法。如果添加的元素已经存在于 set 中，add() 不会重复添加（因为 set 具有自动去重的特性）。方法 1：add(element)（添加单个元素&#xff0…...

编程日记 2025/7/24 1:17:57

转化率提升47%？亚马逊用户行为预测模型深度解读

在亚马逊运营的战场上，谁能更精准地读懂用户行为，谁就更可能赢得转化率的胜利。近年来，越来越多卖家借助“用户行为预测模型”来优化Listing布局、广告投放策略、甚至库存管理，而这些数据驱动的决策也确确实实地带来了质的提升。 …...

编程日记 2025/7/24 9:11:23

C++计算 n! 中末尾零的数量

* 详细说明* 给定一个整数作为输入。目标是找出该数的阶乘结果中末尾零的数量。一个数 N 的阶乘是范围 [1, N] 内所有数的乘积。* * 我们知道，只有当一个数是 10 的倍数或者有因数对 (2, 5) 时，才会产生末尾零。在任何大于 5 的数的阶乘中，…...

编程日记 2025/7/12 1:43:44

大模型中超参数TopK是什么

大模型中的超参数Top-K是文本生成过程中的关键控制参数，主要用于平衡生成结果的确定性与多样性。以下从定义、工作原理、应用场景及与其他参数的协同关系进行详细阐述：一、Top-K的定义与核心机制基本定义 Top-K（Top-K Sampling）是一种基于概率采样的文本生成策略。其核心…...

编程日记 2025/7/20 20:51:05

NetApp ONTAP 9 故障磁盘更换操作指南

以前写过一篇7-mode的磁盘更换文档，好几个朋友反馈说命令都没有，都不对。主要原因是客户现在的环境都是ontap 9的cluster-mode环境了，所以很多命令都不一样了。为此，这里专门就ontap 9的cluster-mode写一篇磁盘更换操作指南&#…...

编程日记 2025/7/24 9:04:15

leetcode day 35 01背包问题 416+1049

0-1背包问题 （1）第一种情况：二维dp[i][j]数组 dp[i][j]表示[0,i]的物品放入容量为j背包的最大价值不放物品i,dp[i][j]dp[i-1][j] 放物品i,dp[i][j]dp[i-1][j-w[i]]v[i] 递推公式为： dp[i][j]dp[i-1][j];//不放 if(w[i]<j)dp…...

编程日记 2025/7/24 9:08:55

MySQL的基本操作

显示所有数据库： SHOW DATABASES; 系统默认数据库： 数据库名用途information_schema存储 MySQL 服务器元数据（如数据库、表、列信息），只读mysql存储用户权限、密码、日志等核心数据（不要随意修改&#xff…...

编程日记 2025/7/22 15:24:35

CSS伪类、clip-path实现三角形、箭头绘制

<template><div :class"$options.name"><div class"triangle-container1"><div class"triangle-RM"></div><div class&q…...

编程日记 2025/7/19 18:54:14

基于大模型的腹股沟疝全流程预测与诊疗方案研究报告

目录一、引言 1.1 研究背景与目的 1.2 研究方法与创新点二、大模型在腹股沟疝术前评估中的应用 2.1 腹股沟疝概述与诊断方法 2.2 术前评估指标与数据收集 2.3 大模型预测原理与实现 2.4 预测结果与传统评估对比三、基于大模型预测的手术方案制定 3.1 手术方式选择…...

编程日记 2025/7/24 3:57:41

零基础上手Python数据分析 (20)：Seaborn 统计数据可视化 - 轻松绘制精美统计图表！

写在前面 —— 告别 Matplotlib 繁琐定制，拥抱 Seaborn 便捷之美，让统计可视化更高效在前面两篇博客中，我们学习了 Python 数据可视化的基石 Matplotlib，掌握了绘制基础图表和进行高级定制的技巧。 Matplotlib 功能强大且灵活，能够满足几乎所有的二维绘图需求。然而，…...

编程日记 2025/7/23 8:53:35

elasticsearch7.15节点磁盘空间满了迁移数据到新磁盘

一.数据安全迁移在 Elasticsearch 中设置某个节点临时不可用（例如进行维护或升级），可以通过以下步骤安全地操作，避免数据丢失或集群状态异常 1: 排除节点分片分配，触发分片迁移到其他节点 PUT /_cluster/settings {&…...

编程日记 2025/7/24 2:37:13

MCP案例—客户端和服务端

MCP简介 Model Context Protocol (模型上下文协议)，简称MCP，MCP是一种协议，用于LLM与外部拓展资源交互的协议。想了解具体细节可参考作者本篇文章MCP理论指南准备本篇文章将带你通过python创建MCP客户端及服务端，并连接到本…...

编程日记 2025/7/19 12:14:54

排序模型（Learning to Rank）

排序模型（Learning to Rank） 要解决的问题排序模型旨在解决信息检索中的排序优化问题。例如： 搜索引擎中对候选网页的排序推荐系统中物品的展示顺序广告系统中广告位的分配核心挑战：根据上下文特征，将最相关/最有…...

编程日记 2025/7/22 22:56:20

L1-1、Prompt 是什么？为什么它能“控制 AI”？

*Prompt 入门 L1-1 想象一下，你只需输入一句话，AI 就能自动为你写一篇文案、生成一份报告、甚至规划你的创业计划。这种“对话即编程”的背后魔法，就是 Prompt 的力量。 🔍 一、Prompt 的定义与由来 Prompt（提示词&am…...

编程日记 2025/7/24 9:05:45

RolmOCR重磅开源：基于Qwen2.5-VL，速度提升40%，手写/倾斜文档识别准确率超92%

向大家介绍一款全新的开源OCR模型——RolmOCR！这款由Reducto AI团队基于阿里巴巴强大的Qwen2.5-VL-7B-Instruct视觉语言模型微调而来的利器，不仅在速度和效率上实现了显著提升（据称处理速度相比其前身olmOCR提升了约40%）&#xff…...

编程日记 2025/7/24 1:09:28

系统架构设计（二）：基于架构的软件设计方法ABSD

“基于架构的软件设计方法”（Architecture-Based Software Design, ABSD）是一种通过从软件架构层面出发指导详细设计的系统化方法。它旨在桥接架构设计与详细设计之间的鸿沟，确保系统的高层结构能够有效指导后续开发。 ABSD 的核心思想 ABS…...

编程日记 2025/7/24 9:07:47

[langchain教程]langchain03——用langchain构建RAG应用

RAG RAG过程离线过程： 加载文档将文档按一定条件切割成片段将切割的文本片段转为向量，存入检索引擎（向量库） 在线过程： 用户输入Query，将Query转为向量从向量库检索，获得相似度TopN信息将…...

编程日记 2025/7/24 9:07:08

一、简单使用 1、加载图片导入依赖 implementation("com.github.bumptech.glide:glide:4.16.0")编写代码 private static final String url = "http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg";btnPic.setOnClickList…...

编程日记 2025/7/21 12:46:29

vue2解析html中的公式，使用vue-katex

文本是markdown格式，需要解析markdown <p v-html"md.render(text)"></p>import MarkdownIt from markdown-it ...const mdRender MarkdownIt(); ...data中md: new MarkdownIt(),现在文本中会出现数学公式，解析使用vue-katex 1.…...

编程日记 2025/7/18 15:39:11

使用Unity Cache Server提高效率

2021年1月20日19:04:28 1 简介 Unity Cache Server，翻译过来就是Unity缓存服务器 1.1 缓存服务器の官方介绍 Unity 有一个完全自动的资源管线。每当修改 .psd 或 .fbx 文件等源资源时，Unity 都会检测到更改并自动将其重新导入。随后，Unity 以内部格式存储从文件导入的数…...

编程日记 2025/7/24 9:07:07

【C++】模板2.0

最近学习了一些模板的知识，速写本博客作为学习笔记，若有兴趣，欢迎垂阅读！ 1.非类型模板参数模板参数分类类型形参与非类型形参。类型形参即：出现在模板参数列表中，跟在class或者typename之类的参数类型名…...

编程日记 2025/7/20 1:20:39

深入解析 Linux 文件系统中的软硬链接：从原理到实践

引言在 Linux 系统中，软链接（Symbolic Link） 和硬链接（Hard Link） 是文件管理的两大核心机制。它们如同文件系统的“快捷方式”与“分身术”，既能节省存储空间，又能实现灵活的文件管理。但两…...

编程日记 2025/7/22 1:14:27

JumpServer多用户VNC桌面配置指南：实现多端口远程访问

在当今的云计算和远程工作环境中，高效且安全地管理多用户远程桌面访问变得越来越重要。本文将详细介绍如何在JumpServer中配置多个VNC桌面，以满足不同用户的远程访问需求。我们将以创建第二个桌面为例，为用户user2配置VNC访问。一、背景说明 JumpServer作为一款优秀的开源…...

编程日记 2025/7/20 7:52:48

【数据结构入门训练DAY-19】总结数据结构中的栈

文章目录前言一、栈的思想二、栈的解题思路结语前言本次训练内容： 栈的复习。总结栈的基本操作一、栈的思想在数据结构中，栈是一种很常见的算法。栈——就像你往桶里放东西似的，要取出桶内的物体就得先把桶顶的物品取出来&#xff…...

编程日记 2025/7/17 8:46:44

MyBatis-Plus 防止 SQL 注入最佳实践指南

🚫 MyBatis-Plus 防止 SQL 注入最佳实践指南作者：William Dawson 标签：Java、MyBatis-Plus、安全、SQL 注入、防护 💥 什么是 SQL 注入？ SQL 注入是一种常见的安全漏洞，攻击者通过恶意构造 SQL 输入参数&…...

编程日记 2025/7/21 1:31:38

AI之pdf解析：Tesseract、PaddleOCR、RapidPaddle（可能为 RapidOCR）和 plumberpdf 的对比分析及使用建议

目录标题 Tesseract、PaddleOCR、RapidPaddle（可能为 RapidOCR）和 plumberpdf 的对比分析1. Tesseract类型: 开源 OCR 引擎特点:缺点:适用场景: 2. PaddleOCR (推荐)类型:特点:缺点:适用场景: 复杂版式文档、多语言混合文本、需要高精度识别的场景&#…...

编程日记 2025/7/20 23:19:01

经典文献阅读之--Kinematic-ICP(动态优化激光雷达与轮式里程计融合)

0. 简介传统的激光雷达里程计系统通过点云配准来计算移动机器人的自运动（ego-motion），但它们通常没有考虑机器人的运动学特性，这可能导致不准确的运动估计，特别是在机器人不可能发生某些运动（如沿z轴的小…...

编程日记 2025/7/10 5:19:29

【显卡占用】kill程序后，显卡仍被占用

如果 kill 程序执行了，但显卡仍然显示被占用，咋个办？ 如图所示，GPU-Util占用为0%，但显示占用48G，且无法再上程序： 执行命令： fuser -v /dev/nvidia* kill pid若上述方法无法解决&am…...

编程日记 2025/7/23 11:39:38

在 macOS 上合并 IntelliJ IDEA 的项目窗口

在使用 IntelliJ IDEA 开发时，可能会打开多个项目窗口，这可能会导致界面变得混乱。为了提高工作效率，可以通过合并项目窗口来简化界面。本文将介绍如何在 macOS 上合并 IntelliJ IDEA 的项目窗口。操作步骤打开 IntelliJ IDEA: 启动你的 I…...

编程日记 2025/7/15 6:00:36

IO流--字节流详解

IO流用于读写数据的（可以读写文件，或网络中的数据） 概述： I指 Input，称为输入流：负责从磁盘或网络上将数据读到内存中去 O指Output，称为输出流，负责写数据出去到网络或磁盘上因…...

编程日记 2025/7/19 4:37:09

6N60-ASEMI机器人功率器件专用6N60

编辑：ll 6N60-ASEMI机器人功率器件专用6N60 型号：6N60 品牌：ASEMI 封装：TO-220F 批号：最新最大漏源电流：6A 漏源击穿电压：600V RDS（ON）Max：1.20Ω …...

编程日记 2025/7/23 5:16:19

实现侧边栏点击标题列表，和中间列表区域联动效果

左侧边栏标题列表实现： -------------------html-----------------------<divclass"uav":class"{ hidden: !isVisible, visible: isVisible }"><ul id"toc"><liv-for"(item, index) in HotList":key"…...

编程日记 2025/7/21 5:27:25

基于MuJoCo物理引擎的机器人学习仿真框架robosuite

Robosuite 基于 MuJoCo 物理引擎，能支持多种机器人模型，提供丰富多样的任务场景，像基础的抓取、推物，精细的开门、拧瓶盖等操作。它可灵活配置多种传感器，提供本体、视觉、力 / 触觉等感知数据。因其对强化学习友好&am…...

编程日记 2025/7/23 15:54:12

kafka监控kafka manager（CMAK）部署配置

一、准备工作 1.1、服务器信息梳理角色IP操作系统安装服务监控机10.45.19.20Linux CentOS 7.9CMAK3.0.0.5、ZooKeeper3.9.0、JDK11、JDK1.8被监控机 Kafka broker.id 050.50.50.101Linux CentOS 7.9Kafka、ZooKeeper（任意版本）被监控机 Kafka broker.…...

编程日记 2025/7/18 15:54:35

线程池的介绍

目录一、什么是线程池二、线程池的详细内容三、线程池的简化一、什么是线程池提到线程池，我们可能想到常量池，可以先来说说常量池： 像是字符串常量，在Java程序最初构建的时候，就已经准备好了，等程…...

编程日记 2025/7/19 5:19:09

day33和day34图像处理OpenCV

文章目录一、图像预处理12 图像梯度处理12.3 Sobel算子12.4 Laplacian算子1.原理：2.语法： 13 图像边缘检测思路13.1 高斯滤波去噪点13.2 计算图像的梯度与方向13.3 非极大值抑制13.4 双阈值筛选13.5 Canny方法和使用 14 绘制图像轮廓14.1 什么是轮廓14.…...

编程日记 2025/7/22 2:13:59

电脑硬盘常见的几种接口类型

一、传统接口（机械硬盘为主） 1. SATA 接口（Serial ATA） 特点： 最主流的机械硬盘（HDD）接口，广泛用于台式机和笔记本电脑。传输速度较慢，理论最大带宽为 6 Gbps&#xff…...

编程日记 2025/7/22 2:29:20

Windows网络及服务：制作系统盘

今天我要介绍的是一个比较有意思且好玩的一个小玩意儿：关于系统盘的制作； 注明：对于系统盘的制作，以及接下来的课程，基本是作为动手课业来进行的，这也是作为程序员的必要进行的一项活动。对于系统盘&…...

编程日记 2025/7/22 1:22:05

Docker Compose 使用实例

文章目录一、Docker Compose 简介二、安装 Docker Compose三、基础配置文件示例（docker-compose.yml）四、关键配置解析五、常用命令六、完整项目示例（Node.js MySQL Nginx）七、高级功能八、最佳实践九、调试技巧一、Docker Co…...

编程日记 2025/7/22 2:07:48

系统架构师2025年论文《论基于UML的需求分析》

论基于 UML 的需求分析摘要： 2018 年 3 月 1 日至 12 月 20 日，我参加了 “某市医院预约挂号系统” 项目的开发，担任系统架构师的工作。该项目是某市医院信息化建设的重要组成部分，目标是：优化医院挂号流程，提高患者就医体验，规范医院号源管理，实现患者预约挂号、医…...

编程日记 2025/7/23 22:24:37

Uniapp 自定义TabBar + 动态菜单实现教程（Vuex状态管理详解）

大家好，我是一诺。今天跟大家分享一下uniapp 封装自定义底部导航栏（TabBar） 过程中的思考和实践。通过本文，你将学会如何打造一个功能完善、可自由定制的TabBar组件！ 先看效果： 支持自定义图标和样式动态…...

编程日记 2025/7/23 15:49:20

4月21日日记

新的一周开始了，好消息是未来这两周都每周只用上3天课，因为这周四五是运动会，下周四五是五一！ 非常好的周一！收到了wxx和san还有小林的礼物！！ wxx的是一个定制的有小排球的蓝牙影响&#xff0…...

编程日记 2025/7/20 6:35:10

2025高频面试算法总结篇【其他】

文章目录直接刷题链接直达LRU Cache买卖股票的最佳时机系列实现一个HashMap环形链表寻找重复数缺失的第一个正数螺旋矩阵字符串相乘分发糖果直接刷题链接直达 LRU Cache 头尾两个伪节点（避免判断） 双向链表146. LRU 缓存买卖股票的最佳时机系列 121…...

编程日记 2025/7/18 12:20:17

vue项目中使用antvX6（可拖拽，vue3）

参考先知demons 这位大佬的这篇文章：https://blog.csdn.net/wzy_PROTEIN/article/details/136305034?utm_mediumdistribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-0-136305034-blog-136032209.235v43pc_blog_bottom_relevance_ba…...

编程日记 2025/7/19 5:45:27