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

Vue2 watch侦听器(监听器)

watch侦听器(监听器)功能是监听数据变化,执行一些业务逻辑 或 异步操作。

核心选项

  • handler‌    监听函数,接收 (newVal, oldVal) 作为参数。
  • deep: true    深度监听对象/数组内部变化。
  • immediate: true‌    在组件创建时立即触发一次回调。
  • flush: 'post'‌    在 DOM 更新后触发回调(Vue 3 新增、此处暂不介绍)。

简单写法

简单类型数据,直接监视。

export default {data() {return {message: 'Hello',user: { name: 'Alice', age: 30 }}},watch: {// 监听简单数据类型message(newVal, oldVal) {console.log('消息变化:', newVal, oldVal);},// 监听对象某个属性'user.name'(newVal) {console.log('用户名变化:', newVal);}}
}

完整写法

  1. deep:true 对复杂类型深度监视
  2. immediate: true 初始化立刻执行一次handler方法
data: {obj: {words: '',lang: ''},result: '',// timer: ''    //与页面渲染无关的属性可以不用写在data中,直接在方法中this.timer就行	
},
watch: {'obj': {deep: true,immediate: true,handler (newValue) {// 防抖:延迟执行-干啥先等等clearTimeout(this.timer)this.timer = setTimeout(async () => {const res = await axios({url: '自己的接口',params: {words: newValue.words,lang: lang}})this.result = res.data.dataconsole.log(res.data.data)}, 300)}} 
}

常见问题 

1. 为什么旧值 (oldVal) 不更新?

  • 对象/数组类型‌:直接修改内部属性时,oldVal 可能与 newVal 相同(需开启 deep: true)。
  • 响应式数据‌:确保监听的是通过 ref/reactive 声明的响应式数据。

2. 监听失效?

  • 检查数据是否响应式(如直接解构 reactive 对象会失去响应性)。
  • 确保路径正确(如 'user.name' 在选项式 API 中需用引号包裹)。

3. 性能优化

  • 避免过度使用 deep: true,尤其是大型对象。
  • 考虑用 computed 计算属性代替简单依赖。

总结

  • 使用场景‌:数据变化需要触发异步操作、复杂逻辑或 DOM 更新。
  • 避免场景‌:频繁同步操作(可能影响性能)。
  • 替代方案‌:简单计算用 computed,表单验证用 v-model + 事件。

通过合理使用 watch,可以更灵活地控制数据流和交互逻辑。

相关文章:

Vue2 watch侦听器(监听器)

watch侦听器(监听器)功能是监听数据变化,执行一些业务逻辑 或 异步操作。 核心选项 ‌handler‌ 监听函数,接收 (newVal, oldVal) 作为参数。‌deep: true 深度监听对象/数组内部变化。‌immediate: true‌ 在组件创建时…...

【PCB工艺】基础:电子元器件

电子原理图(Schematic Diagram)是电路设计的基础,理解电子元器件和集成电路(IC)的作用,是画好原理图的关键。 本专栏将系统讲解 电子元器件分类、常见 IC、电路设计技巧,帮助你快速掌握电子电路…...

linux性能监控的分布式集群 prometheus + grafana 监控体系搭建

prometheusgrafana分布式集群资源监控体系搭建 前言一、安装 prometheus二、在要监控的服务器上安装监听器三、prometheus服务器配置四、grafana配置大屏五、创建Linux监控看板五、监控windows服务器注意事项 前言 Prometheus 是一个开源的 ​分布式监控系统 和 ​时间序列数据…...

Ubuntu AX200 iwlwifi-cc-46.3cfab8da.0.tgz无法下载的解决办法

文章目录 前言一、检查网卡是否被识别二、确认内核模块是否可用1.AX200 wifi 要求内核5.12.检查 iwlwifi.ko 是否存在:3.如果未找到,可能是内核模块未正确生成。尝试安装 linux-modules-extra:4.再次检查 iwlwifi.ko 是否存在:5.确…...

LinkedList与链表

ArrayList的缺陷 在上一篇博客中,小编已经较为详细得给大家介绍了ArrayList这个结构了。但是ArrayList存在一些缺陷:由于其底层是一段连续空间,当在ArrayList任意位置插入或者删除元素时,就需要将后序元素整体往前或者往后搬移&am…...

CCF 编程能力认证 C++ 四级宝典

CCF编程能力等级认证(以下简称GESP)2025年四次认证时间分别为:3月22日、6月28日、9月27日、12月20日,认证方式为线下机考,认证语言包括:C、Python和Scratch三种语言,其中Scratch认证为一到四级&…...

信创系统极速文件查找:locate 命令详解

原文链接:信创系统极速文件查找:locate 命令详解 Hello,大家好啊!今天给大家带来一篇信创终端操作系统上 locate 命令详解的文章。在 Linux 及信创终端操作系统(如 统信 UOS、麒麟 KOS)中,查找…...

数据集获取

sklearn数据集 sklearn有四部分数据。其中sklearn的数据集有两部分真实的数据,一部分嵌入到了sklearn库中,即安装好sklearn后就自带了一部分数据,这些数据的规模比较小称为small toy datasets ,还有一部分数据是需要在网上下载的,sklearn提供了下载的api接口,这些数据规…...

三格电子PLC数据采集网关-工业互联的智能枢纽

在工业自动化领域,设备间的数据互通与协议兼容是核心挑战之一。三格电子推出的PLC据采集网关SG-PLC-Private,凭借其多协议兼容、高稳定性和灵活配置能力,成为工业物联网(IIoT)中实现设备互联的关键设备。本文将从产品功…...

【sgFloatDialog】自定义组件:浮动弹窗,支持修改尺寸、拖拽位置、最大化、还原、最小化、复位

sgFloatDialog <template><div :class"$options.name" v-if"visible" :size"size" :style"style"><!-- 托盘头部 --><div class"header" ref"header" dblclick.stop.prevent"dblclic…...

conda 常用命令

常用 Conda 命令整理环境管理 conda create --name 环境名 &#xff1a;创建新环境 conda activate 环境名 &#xff1a;激活环境 conda deactivate&#xff1a;退出环境 conda env list&#xff1a;列出所有环境 conda remove --name 环境名 --all &#xff1a;删除环…...

神聖的綫性代數速成例題10. N維矢量綫性運算、矢量由矢量組綫性表示、N個N維矢量相關性質

N 維矢量綫性運算&#xff1a; 設&#xff0c;是維矢量&#xff0c;是數。加法&#xff1a;。數乘&#xff1a;。 矢量由矢量組綫性表示&#xff1a; 設是n維矢量&#xff0c;若存在一組數&#xff0c;使得&#xff0c;則稱矢量可由矢量組綫性表示。 N 個 N 維矢量相關性質&…...

力扣977. 有序数组的平方(双指针技巧)

Problem: 977. 有序数组的平方 文章目录 题目描述思路Code 题目描述 思路 由于数组是非递减且包含正、负数&#xff0c;则假如我们将数组中的每一个元素取平方并且将其从原始的某一个位置分开成两个数组来看待&#xff08;一个数组从前往后看&#xff0c;一个数组从后往前看&am…...

单片机flash存储也做磨损均衡

最近在做一个项目&#xff0c;需要保存设置数据&#xff0c;掉电不丢失。那么首先想到的是加个24c02&#xff0c;是一个eeprom&#xff0c;但是客户板太小&#xff0c;没有办法进行扩展。后面就找了一个带ee的OTP单片机&#xff0c;发现擦写次数有限&#xff0c;只有1000次&…...

第7章 类与面向对象

6-1 二维平面上的点操作&#xff08;Python3&#xff09; 题目描述 设计一个表示二维平面上点的类 Point。该类应该包含以下功能&#xff1a; 两个私有属性 _x 和 _y&#xff0c;分别表示点的横坐标和纵坐标。 一个构造函数 __init__&#xff0c;用于初始化点的坐标。 一个…...

【算法】力扣 713题:乘积小于 K 的子数组之深入思考

文章目录 前言题目&#xff1a;乘积小于 K 的子数组参考思路方法一&#xff1a;滑动窗口方法二&#xff1a;二分查找 参考题解方法一&#xff1a;滑动窗口解法方法二&#xff1a;二分查找解法 深入思考浮点精度&#xff1f;right - left 1&#xff1f;二分法&#xff1f;哈希优…...

Milvus vs. ElasticSearch:向量库检索性能测试

目录 1. 构建检索库2. 测试条件3. 测试结果4. 性能分析5. 结论 1. 构建检索库 构建通用场景库总计约2万张。构建车辆数据库总计约12万张。构建公共数据库&#xff0c;包括Flickr30k、COCO、nlvr2、vqa等数据集约43万张。 2. 测试条件 环境说明&#xff1a;分别单机部署Milvu…...

高级数据结构应用:并查集、跳表、布隆过滤器与缓存结构

高级数据结构应用:并查集、跳表、布隆过滤器与缓存结构 在解决复杂问题时,选择合适的数据结构往往是成功的关键。本文将深入探讨四种强大而实用的高级数据结构:并查集、跳表、布隆过滤器和高效缓存结构(LRU和LFU),包括它们的原理、实现、复杂度分析和实际应用场景。 1.…...

CVPR2025 | 蚂蚁浙大提出MP-GUI算法:全方位增强MLLM的GUI理解能力

近日&#xff0c;计算机视觉和模式识别领域国际顶会CVPR 2025公布了论文录用结果&#xff0c;蚂蚁集团与浙江大学EAGLE实验室合作的论文 “MP-GUI: Modality Perception with MLLMs for GUI Understanding” 被成功录用。 IEEE国际计算机视觉与模式识别会议&#xff08;CVPR&a…...

过河卒cpp动态规划

题目如下 思路 利用二维数组存储棋盘的各个点的位置&#xff0c;首先初始化所有位置为0&#xff0c;然后记马的位置为1&#xff0c;将m&#xff0c;n同时加2&#xff0c;避免马的位置溢出&#xff0c;然后对二维数组进行递推算出dp[n][m] 代码及解析如下 谢谢观看&#xff01;…...

春天咋会像冬天一样

2025年3月20日&#xff0c;阴&#xff0c;天寒 遇见的事&#xff1a;21&#xff5e;24号去曲靖招生&#xff0c;打电话给我说换一下&#xff0c;换了后又没有车了&#xff0c;这么坑。 感受到的情绪&#xff1a;你知道么&#xff0c;换的前提是有车。开车不给报销&#xff0c;…...

DooTask在Linux的离线部署教程

DooTask在Linux的离线部署教程 下载安装包 从网盘中将安装包下载到本地&#xff0c;下载地址 通过网盘分享的文件&#xff1a;DooTask项目管理工具 链接: https://pan.baidu.com/s/1hGmLXonT4c8hLiDP1QBr8w?pwdgdp6 提取码: gdp6 通过网盘分享的文件&#xff1a;DooTask项目…...

分享下web3j 常见用法

转账 fun sendEthTransaction(privateKey: String,toAddress: String,amount: BigDecimal) {//chainIdval chainId:Long 1//url 可以从https://chainlist.org/里面获取可用节点//eth转账&#xff0c;bnb同理&#xff0c;但需发送到bnb对应节点val url "https://xxx"…...

跨域问题确认及处理

背景如下&#xff1a; 近期在做的项目中&#xff0c;有个奇怪的需求&#xff0c;需要在JSP项目中嵌套一个VUE项目&#xff0c;原因是&#xff1a;JSP项目是在运且不大方便重构的一个项目&#xff0c;新需求又想为了未来着想做一套单独的项目&#xff0c;无奈只能嵌套。 当项目开…...

PyCharm如何添加已有的conda环境

1、点击文件中的设置 2、在右侧选中项目下的Python解释器 3、在右侧解释器一栏找到添加解释器选项 4、选择本地解释器 5、填写信息 环境&#xff1a;选择现有 类型&#xff1a;conda conda路径&#xff1a;...\Anaconda\Scripts\conda.exe 环境&#xff08;python路径&…...

揭开最大子段和问题的神秘面纱:从暴力法到极致优化的算法之旅

最大子段和问题&#xff1a;从暴力法到优化的算法解析 题目链接 题目描述 给出一个长度为 nn 的序列 aa&#xff0c;选出其中连续且非空的一段使得这段和最大。 输入格式 第一行是一个整数&#xff0c;表示序列的长度 n。第二行有 n 个整数&#xff0c;第 i 个整数表示序列的…...

MySQL原理:逻辑架构

目的&#xff1a;了解 SQL执行流程 以及 MySQL 内部架构&#xff0c;每个零件具体负责做什么 理解整体架构分别有什么模块每个模块具体做什么 目录 1 服务器处理客户端请求 1.1 MySQL 服务器端逻辑架构说明 2 Connectors 3 第一层&#xff1a;连接层 3.1 数据库连接池(Conn…...

提升模型性能:数据增强与调优实战

‌一、为什么需要数据增强&#xff1f; 数据增强通过对训练图像进行‌随机变换‌&#xff0c;能够有效&#xff1a; 增加数据多样性&#xff0c;防止过拟合提升模型对不同视角、光照条件的鲁棒性在数据量不足时显著提升模型性能 二、MNIST手写数字识别实战‌ ‌1. 加载数据…...

Emacs 折腾日记(十八)——改变Emacs的样貌

截止到上一篇文章为止&#xff0c;之前教程 的内容都看完了&#xff0c;虽然它的后记部分提供了一些后续进阶的内容需要我们自己读手册。但是我不太想继续在elisp上死磕了。看着自己学了那么久的elisp&#xff0c;但是自己的emacs仍然没有半点改变&#xff0c;这个时候各位读者…...

VNA操作使用学习-14 再测晶振特性

再测一下4Mhz晶振&#xff0c;看看特性曲线&#xff0c;熟悉一下vna使用。 s11模式&#xff0c;找遍了各种format都无法显示&#xff0c;只有这一种&#xff08;s11&#xff0c;Resistance&#xff09;稍微显示出一个谐振&#xff0c;但是只有一个点。 s21模式 这是201p&#…...

CentOS7 离线下载安装 GitLab CE

依赖下载 https://vault.centos.org/7.9.2009/os/x86_64/Packages/policycoreutils-python-2.5-34.el7.x86_64.rpm 依赖安装 rpm -ivh policycoreutils-python-2.5-34.el7.x86_64.rpm 查看是否安装依赖 rpm -qa | grep policycoreutils-pythongitlab下载 https://packag…...

LeetCode 热题 100_跳跃游戏 II(79_45_中等_C++)(贪心算法)

LeetCode 热题 100_跳跃游戏 II&#xff08;79_45&#xff09; 题目描述&#xff1a;输入输出样例&#xff1a;题解&#xff1a;解题思路&#xff1a;思路一&#xff08;贪心选择&#xff09;&#xff1a; 代码实现代码实现&#xff08;思路一&#xff08;贪心算法&#xff09;…...

《Linux系统编程篇》Linux Socket 网络编程01 API介绍(Linux 进程间通信(IPC))——基础篇

文章目录 引言1. **创建Socket**2. **绑定Socket**3. **监听Socket**4. **接受客户端连接**5. **连接服务器**6. **发送数据**7. **接收数据**8. **发送数据&#xff08;UDP&#xff09;**9. **接收数据&#xff08;UDP&#xff09;**10. **关闭Socket**11. **设置/获取Socket选…...

系统思考—啤酒游戏经营决策沙盘模拟

再次感谢文华学院的邀请&#xff0c;为经纬集团管理层带来 《啤酒游戏经营决策沙盘》&#xff01; 很多朋友问&#xff1a;“最近是不是啤酒游戏上的少了&#xff1f;” 其实&#xff0c;真正的关键不是游戏本身&#xff0c;而是——如何让大家真正看见复杂系统中的隐性结构。 …...

利用设计模式构建事件处理系统

在现代软件开发中&#xff0c;设计模式提供了一种可重用的解决方案来解决常见的设计问题。在这篇博客中&#xff0c;我们将探讨如何利用模板方法模式、责任链模式、建造者模式以及线程安全设计来构建一个灵活且可扩展的事件处理系统。 设计模式及其应用 1. 模板方法模式 应用…...

ThreadLocal 的详细使用指南

一、ThreadLocal 核心原理 ThreadLocal 是 Java 提供的线程绑定机制&#xff0c;为每个线程维护变量的独立副本。其内部通过 ThreadLocalMap 实现&#xff0c;每个线程的 Thread 对象都有一个独立的 ThreadLocalMap&#xff0c;存储以 ThreadLocal 对象为键、线程局部变量为值…...

全员DeepSeek时代,前端能做些什么?

全员DeepSeek时代&#xff0c;前端能做些什么&#xff1f; 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;可以分享一下给大家。点击跳转到网站。 https://www.captainbed.cn/ccc #mermaid-svg-VNyL95jkz9jEXgUq {font-family:&…...

阿里云 AI 搜索产品荣获 Elastic Innovation Award 2024

阿里云AI搜索产品荣获Elastic Innovation Award 2024&#xff0c;该奖项于近日在新加坡ElasticON 2025的Elastic合作伙伴峰会上颁发&#xff0c;旨在表彰基于Elastic平台开发企业级生成式人工智能&#xff08;GenAI&#xff09;应用的顶尖合作伙伴&#xff0c;这些应用有效帮助…...

html5制作2048游戏开发心得与技术分享

2048游戏开发心得与技术分享 这里写目录标题 2048游戏开发心得与技术分享项目概述技术架构1. 核心技术栈2. 项目结构 核心功能实现1. 数据结构设计2. 移动逻辑实现3. 触摸支持 性能优化1. DOM操作优化2. 事件处理优化 开发心得1. 代码组织2. 调试技巧3. 用户体验优化 项目亮点技…...

AI日报 - 2025年3月21日

&#x1f31f; 今日概览&#xff08;60秒速览&#xff09; ▎&#x1f916; AGI突破 | OpenAI成立安全委员会&#xff0c;加速AGI治理框架构建 ▎&#x1f4bc; 商业动向 | 微软发布医疗大模型DAX Copilot 3.0&#xff0c;覆盖全球临床场景 ▎&#x1f4dc; 政策追踪 | 中国发布…...

MyBatis-Plus:告别手写 SQL 的高效之道

目录 1. MyBatis-plus 简介 2. MyBatis-Plus 快速上手 2.1 项目准备 2.2 导入 MyBatis-Plus 依赖 2.3 配置数据库连接 2.4 配置 MyBatis-Plus 日志打印 3. 使用 MyBatis-Plus 3.1 创建 model 类 3.2 创建 mapper 接口 3.3 MyBatis-Plus 映射机制 3.3.1 TableName &a…...

【AI News | 20250320】每日AI进展

AI Repos 1、servers 该仓库提供详细入门指南&#xff0c;用户可通过简单步骤连接Claude客户端&#xff0c;快速使用所有服务器功能。此项目由Anthropic管理&#xff0c;展示MCP的多样性与扩展性&#xff0c;助力开发者为大语言模型提供安全、可控的工具与数据访问。 2、awe…...

让“树和二叉树”埋在记忆土壤中--性质和概念

Nice to meet your! 目录 树的介绍&#xff1a; 树的创建&#xff1a; 二叉树的概念和结构&#xff1a; 二叉树的存储结构&#xff1a; 树的介绍&#xff1a; 概念和结构&#xff1a; 不知你们是否在现实中看见过分为两个叉的枯树&#xff0c;大概长这样&#xff1a; 那…...

210、【图论】课程表(Python)

题目 思路 这道题本质上是一个拓扑排序。每次先统计每个点的入度个数、然后再统计点与点之间的邻接关系&#xff0c;找到入度为0的点作为起始遍历点。之后每遍历到这个点之后&#xff0c;就把这个点后续的邻接关系边的点入度减去一。当某个点入度为0时&#xff0c;继续被加入其…...

【Linux篇】进程控制

&#x1f4cc; 个人主页&#xff1a; 孙同学_ &#x1f527; 文章专栏&#xff1a;Liunx &#x1f4a1; 关注我&#xff0c;分享经验&#xff0c;助你少走弯路&#xff01; 1. 进程创建 1.1 fork函数 在linux中fork函数是非常重要的函数&#xff0c;它从已存在进程中创建一个…...

freeswitch(在呼叫失败的情况下如何播放语⾳提⽰)

亲测版本centos 7.9系统–》 freeswitch1.10.9 本人freeswitch安装路径(根据自己的路径进入) /usr/local/freeswitch/etc/freeswitch⼀般我们在打电话时会听到『您拨的电话正在通话中,请稍后再 拨.』,或『电话⽆应答』之类的提⽰,我们在 FreeSWITCH ⾥也可以这样做。 …...

软考系统架构设计师之计算机组成与体系结构笔记

一、计算机硬件组成 1. 冯诺依曼结构与哈佛结构 冯诺依曼结构&#xff1a;以存储器为中心&#xff0c;指令和数据统一存储&#xff0c;通过总线连接运算器、控制器、输入输出设备。其核心思想是“存储程序控制”&#xff0c;但存在存储器访问瓶颈问题。哈佛结构&#xff1a;指…...

gonet开源游戏服务器环境配置

1.mysql搭建 搜索mysql-server apt安装包名 sudo apt search mysql-server 安装mysql-server sudo apt-get install mysql-server 安装完成后会&#xff0c;启动mysql服务及创建系统服务 查看服务状态 systemctl status mysql.service 使用超级权限登陆mysql sudo mysql 授…...

软件工程之软件验证计划Software Verification Plan

个人主页&#xff1a;云纳星辰怀自在 座右铭&#xff1a;“所谓坚持&#xff0c;就是觉得还有希望&#xff01;” 本文为基于ISO26262软件验证计划模板&#xff0c;仅供参考。 软件验证计划&#xff0c;包括&#xff1a; 1. 软件需求验证计划 2. 软件架构设计验证计划 3. 软件单…...

大模型详细配置

Transformer结构 目前主力大模型都是基于Transformer的&#xff0c;以下是Transformer的具体架构 它由编码器(Encoder)以及解码器(Decoder)组成&#xff0c;前者主要负责对输入数据进行理解&#xff0c;将每个输入 词元都编码成一个上下文语义相关的表示向量&#xff1b;后者…...