学习vue3:监听器
目录
一，关于监听的概述
二，手动监听器（watch函数)
watch（）函数语法
监听基本数据类型
监听对象，对象属性
三，自动监听器（watchEffect函数）
watchEffect()函数语法
一，关于监听的概述
在前端界面，当数据发生变化时，对变化后的数据做出及时处理。这里我举一个生活上的例子
在我们学生时代，我们指导，当中午12点下课铃声响起时，就去吃饭。这如果套用“监听”的方式
是不是可以说，监听的数据是时间，当指向12点，就对变化后的时间做出反馈。
二，手动监听器（watch函数)
watch 是一个用于观察和响应Vue响应式系统中数据变化的方法。它允许你指定一个数据源（可以是响应式引用、计算属性、组件的属性等），当这个数据源的值发生变化时，你可以执行一些响应
watch（）函数语法
-
source：可以是一个响应式引用（ref）、响应式对象（reactive）、getter 函数或一个数组（包含多个监听源）。 -
callback：当监听的源发生变化时，会调用这个回调函数。回调函数接收两个参数：newValue和oldValue。 -
options：可选参数，用于配置watch的行为。常见的选项包括：-
immediate：布尔值，表示是否立即执行回调函数，默认为false。 -
代码
deep：布尔值，表示是否深度监听对象的变化，默认为false。
-
import { watch } from 'vue';watch(source, callback, options);示例
监听基本数据类型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><select v-model="selectValue"><option value="0">请选择</option><option value="100">西瓜</option><option value="200">苹果</option><option value="300">香蕉</option><option value="400">草莓</option></select></div><script type="module">import {createApp,ref,watch} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({setup(){const selectValue = ref(0)watch(selectValue,(e,e1,e2)=>{console.log(e)console.log(e1)console.log(e2)})return {selectValue,}}}).mount('#app')</script>
</body>
</html>测试结果
通过watch函数监听selectValue(第一个参数） 的变化，第二个参数是 回调函数用于检测到数据发生变化后，做出处理！其中 参数 e:当前数据值 ；e1：上一个数据值；e2：回调函数
监听对象，对象属性
注意：如果监听的是复杂的数据，使用 回调函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><select v-model="obj.money"><option value="0">请选择</option><option value="100">西瓜</option><option value="200">苹果</option><option value="300">香蕉</option><option value="400">草莓</option></select><p>你选择了：{{obj.money}}</p></div><script type="module">import {createApp,ref,watch,reactive,watchEffect} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({setup(){const selectValue = ref(0)const obj=reactive({name:"dj",money:30})watch(()=>obj.money,(e,e1,e2)=>{console.log(e)console.log(e1)console.log(e2) })return {obj}}}).mount('#app')</script>
</body>
</html>测试结果
注意到watch函数监听数据是对象的属性obj.money 的变化,e，e1,e2参数分别表示obj.money当前值，上一次值，以及回调函数本身
三，自动监听器（watchEffect函数）
watchEffect()函数语法
effect（必选） :回调函数，写监听后的逻辑代码
options（可选）
类型：Object
说明：配置选项，用于控制 watchEffect 的行为。常见的选项包括：
- flush：控制回调函数的执行时机，默认值是 'pre'。
- 'pre'：在组件 DOM 更新之前执行回调函数。
- 'post'：在组件 DOM 更新之后执行回调函数。
- 'sync'：立即同步执行回调函数（默认行为）。
- onTrack：一个回调函数，用于追踪依赖的响应式数据。当副作用函数访问响应式数据时，会调用这个回调函数。
- onTrigger：一个回调函数，用于触发回调函数执行。当依赖的响应式数据发生变化时，会调用这个回调函数。
watchEffect(effect, options)watchEffect函数 自动监听，没有设置监听对象，表示监听所有，通过条件判断，执行相关任务。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><select v-model="obj.money"><option value="0">请选择</option><option value="100">西瓜</option><option value="200">苹果</option><option value="300">香蕉</option><option value="400">草莓</option></select><p>你选择了：{{obj.money}}</p></div><script type="module">import {createApp,ref,watch,reactive,watchEffect} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({setup(){const selectValue = ref(0)const obj=reactive({name:"dj",money:30})watchEffect(()=>{console.log("effect!!!!!!!!!!!!!!!!!")if(obj.name=="100"){console.log("西瓜")}else if(obj.money=="200"){console.log("苹果")}else if(obj.money=="300"){console.log("香蕉")}else if(obj.money=="400"){console.log("草莓")}else{console.log("请选择")}})return {selectValue,obj}}}).mount('#app')</script>
</body>
</html>测试结果
相关文章：
学习vue3:监听器
目录 一，关于监听的概述 二，手动监听器（watch函数) watch（）函数语法 监听基本数据类型 监听对象，对象属性 三，自动监听器（watchEffect函数） watchEffect()函数语法…...
十大排序算法--快速排序
目录 原理 第一步 第二步 代码 递归实现快速排序 原理 分治法核心步骤 选择基准值（Pivot） 从数组中选一个元素作为基准值（如最右侧元素、中间元素或随机元素）。 分区（Partition） 将数组分为两部分…...
基于Docker搭建Harbor私有镜像仓库
Harbor 是 VMware 开源的企业级 Docker 容器镜像仓库，支持镜像存储、访问控制、镜像复制、安全扫描、审计日志等功能，适合企业级私有化部署。 1.前置环境说明 Harbor的部署依赖于Docker和Docker Compose环境。鉴于Docker已在系统中完成安装，…...
CentOS 7上搭建高可用BIND9集群指南
在 CentOS 7 上搭建一个高可用的 BIND9 集群通常涉及以下几种关键技术和策略的组合：主从复制 (Master-Slave Replication)、负载均衡 (Load Balancing) 以及可能的浮动 IP (Floating IP) 或 Anycast。 我们将主要关注主从复制和负载均衡的实现，这是构成高…...
使用SQLite Studio导出/导入SQL修复损坏的数据库
使用SQLite Studio导出/导入SQL修复损坏的数据库 使用Zotero时遇到了数据库损坏，在软件中寸步难行，遂尝试修复数据库。 一、SQLite Studio简介 SQLite Studio是一款专为SQLite数据库设计的免费开源工具，支持Windows/macOS/Linux。相较于其…...
Liquid Wire 柔性应变传感器：金属凝胶导体 | 仿生肌肉长度监测 | 高精度动作控制
柔性应变传感器通过模拟生物系统反馈机制，为软体机器人提供高精度动作控制能力。研究显示，基于液态导电金属的柔性传感纤维可精准测量仿生手指触觉力（约 1600 kPa）和关节角度变化（约 60），实现特…...
Java IO流操作
Java IO流操作是处理文件和数据流的基础。通过FileInputStream和FileOutputStream，可以读写二进制文件；通过FileReader和FileWriter，可以处理文本文件。BufferedReader提高字符读取效率，InputStreamReader实现字节流到字符流的转换…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（25）：受身形（3）
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（25）：受身形（3） 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）受身形（1）两要素时，使用【に】（2）三要素时，使用【を】或其他（３）（４）（５） によって（６）から VS で（2）復習（ふくしゅう）：3、单词（…...
BPMN.js编辑器设计器与属性面板数据交互
以下是基于提供的Vue组件代码生成的类图，结合BPMN设计器特性与Vue组件封装规范绘制： #mermaid-svg-B6PK7fjqLLTHqh8B {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-B6PK7fjqLLTHqh8B .error…...
os agent智能体软件 - 第三弹 - 纯语音交互
前两期期我们发布了产品的初级形态，那时候还只能是“软件开发者”在本地配置使用，或者运行起来有个大黑框，使用起来美观度太差。 到今天大概20天，我们的第3版已经出来了，不仅做成了电脑端的exe软件（任何人…...
PCB设计教程【入门篇】——电路分析基础-基本元件（二极管三极管场效应管）
前言 本教程基于B站Expert电子实验室的PCB设计教学的整理，为个人学习记录，旨在帮助PCB设计新手入门。所有内容仅作学习交流使用，无任何商业目的。若涉及侵权，请随时联系，将会立即处理、 目录 前言 1.二极管 1.发光…...
python打卡训练营打卡记录day31
知识点回顾 规范的文件命名规范的文件夹管理机器学习项目的拆分编码格式和类型注解 作业：尝试针对之前的心脏病项目ipynb，将他按照今天的示例项目整理成规范的形式，思考下哪些部分可以未来复用。 心脏病项目目录 目录结构:heart/ ├── conf…...
Python列表推导式和生成器表达式详解
Python列表推导式和生成器表达式详解 引言 Python以其简洁优雅的语法而闻名，其中列表推导式（List Comprehensions）和生成器表达式（Generator Expressions）就是这种优雅性的典型代表。本文将深入浅出地介绍这两种强大的…...
Redis 命令大全
Redis 是一个开源的内存数据结构存储系统，支持多种数据结构。以下是 Redis 的常用命令分类总结： 一、Key（键）相关命令 命令描述示例DEL key删除键DEL nameEXISTS key检查键是否存在EXISTS nameEXPIRE key seconds设置键的过期时间(秒)EXPIRE name 60TTL key查看键剩余过期…...
Wan2.1 图生视频 支持批量生成
Wan2.1 图生视频 支持批量生成 flyfish 综合效果 实现基于 Wan2.1 模型的配置化批量生成功能，支持从prompt.json读取多个 “图像 - 文本提示” 组合（每个任务可关联多图像），通过config.json集中管理模型路径、分辨率、帧数、引…...
Git 删除大文件教程
🧹 Git 删除大文件完整教程 🧩 适用场景 不小心将大文件（如视频、压缩包、模型文件等）提交到了 Git 仓库想彻底从仓库和提交历史中删除这个文件希望远程仓库体积减小（如 GitHub 上传失败） 🛠️…...
题海拾贝：P2285 [HNOI2004] 打鼹鼠
Hello大家好！很高兴我们又见面啦！给生活添点passion，开始今天的编程之路！ 我的博客：<但凡. 我的专栏：《编程之路》、《数据结构与算法之美》、《题海拾贝》、《C修炼之路》 1、题目 P2285 [HNOI2004] 打…...
第40天-Python开发音乐播放器完整指南
一、技术选型与工具准备 核心库： Pyqt5：Python标准GUI库，构建用户界面 os / sys：文件系统操作 开发环境： bash 复制 下载 pip install pyqt5 二、功能设计 功能模块描述播放控制播放/暂停/停止/上一曲/下一曲播放列表管理添加/删除/保存/加载歌曲音频可视化进度条显示与拖…...
【优秀三方库研读】在 quill 开源库中为什么封装 safe_fwrite，而不是直接使用系统 fwrite
在 Quill 日志库中，safe_fwrite 函数的封装是为了解决直接使用系统 fwrite 时可能存在的 可靠性 和 错误处理 问题，同时兼顾性能优化。以下从多个维度详细分析其设计动机和实现原理： 一、代码功能解析 QUILL_ATTRIBUTE_HOT static void safe_fwrite(void const* ptr, size_…...
UE（虚幻）学习（六）插件打包在UE5.3.2下Value cannot be null的错误
自己写的插件打包出现了Unhandled exception: System.ArgumentNullException: Value cannot be null.的错误，发现只有UE5.3会报出。 D:\UE_5.3\Engine\Build\BatchFiles>Runuat.bat BuildPlugin -PluginF:\UEProjects\DQSDK5_3\Plugins\DQSDK\DQSDK.uplugin -Pa…...
JDBC在Java项目开发中的核心作用与实战应用
一、JDBC概述及其在项目开发中的重要性 JDBC(Java Database Connectivity)是Java语言中用来规范客户端程序如何访问数据库的应用程序接口(API)，它为Java开发者提供了与各种关系型数据库进行交互的统一方式。 JDBC的核心价值： 提供与数据库无关的标准接…...
为 Jenkins添加 Windows Slave远程执行 python项目脚本
测试环境 JAVA JDK 1.7.0_13 (jdk-7u13-windows-i586.exe) Jenkins Win11 64 python项目环境 实践操作 1、新建与配置结点 【系统管理】-> 【管理结点】-> 【新建结点】, 如上，输入结点名称，勾选 【Dumb Slave】，点击【OK】 说明&am…...
深入解析Spring Boot与Redis的缓存集成实践
深入解析Spring Boot与Redis的缓存集成实践 引言 在现代Web应用中，缓存技术是提升系统性能的重要手段之一。Redis作为一种高性能的内存数据库，广泛应用于缓存场景。本文将详细介绍如何在Spring Boot项目中集成Redis，并探讨其在实际开发中的…...
硬件工程师笔记——三极管Multisim电路仿真实验汇总
目录 1 三极管基础 更多电子器件基础知识汇总链接 1.1 工作原理 NPN型三极管的工作原理 PNP型三极管的工作原理 1.2 三极管的特性曲线 输入特性曲线 理想和现实输出特性 三极管的主要参数包括： 2 三极管伏安特性 2.1 伏安特性仿真 Multisim使用说明链接…...
基于 ABP vNext + CQRS + MediatR 构建高可用与高性能微服务系统：从架构设计到落地实战
🧠 基于 ABP vNext CQRS MediatR 构建高可用与高性能微服务系统：从架构设计到落地实战 目录 🧠 基于 ABP vNext CQRS MediatR 构建高可用与高性能微服务系统：从架构设计到落地实战🧰 模块结构概览📦 各…...
java云原生实战之graalvm 环境安装
windows环境安装 在Windows环境下安装GraalVM并启用原生镜像功能时，需要Visual Studio的组件支持。具体要点如下： 核心依赖： 需要安装Visual Studio 2022或更新版本，并确保勾选以下组件： "使用C的桌面开发"…...
Python 包管理工具uv依赖分组概念解析
在 Python 包管理工具 uv 中，依赖分组（如 dev、prod）是一种将项目的不同依赖按用途分类管理的机制。通过分组，开发者可以清晰地分离生产环境（运行项目所需的核心依赖）和开发环境（仅在开发阶段使…...
C语言-9.指针
9.1指针 9.1-1取地址运算：&运算符取得变量的地址 运算符& scanf(“%d”,&i);里的&获取变量的地址，它们操作数必须是变量int i;printf(“%x”,&i);地址的大小是否与int相同取决于编译器int i;printf(“%p”,&i); &不能取的地址不能对没有地址的…...
GitHub 自动认证教程
## 简介 在使用 GitHub 时，为了避免每次提交代码都需要输入用户名和密码，我们可以使用 SSH 密钥进行自动认证。本教程将详细介绍如何设置 SSH 密钥并配置 GitHub 自动认证。 ## 步骤一：检查现有 SSH 密钥 首先，检查您的电脑是否…...
labelme的安装与使用（以关键点检测为例）、labelme格式标签转换
注：labelme 和 labelImg 是两款不同的数据标注工具。labelme 的 Github 官方地址： https://github.com/wkentaro/labelmehttps://github.com/wkentaro/labelme 参考笔记： Labelme标注工具安装及使用_labelme安装及使用教程-CSDN博客 学习视…...
【Git】远程操作
Git 是一个分布式版本控制系统 可以简单理解为，每个人的电脑上都是一个完整的版本库，这样在工作时，就不需要联网 了，因为版本库就在自己的电脑上。 因此， 多个人协作的方式，譬如说甲在自己的电脑上改了文件…...
密码学实验
密码学实验二 一、实验目的（本次实验所涉及并要求掌握的知识点） 掌握RSA算法的基本原理并根据给出的RSA算法简单的实现代码源程序,以及能够使用RSA对文件进行加密。掌握素性测试的基本原理，并且会使用Python进行简单的素性测试以及初步理解…...
nettrace工具介绍
简介 仓库地址： https://github.com/OpenCloudOS/nettrace 背景： 在云原生场景中，linux系统中的网络部署变得越来越复杂，一个tcp连接，从客户端到服务器，中间可能要经过复杂的NAT、GRE、IPVS等过程&#x…...
Jenkins+Docker+Harbor快速部署Spring Boot项目详解
JenkinsDockerHarbor快速部署Spring Boot项目详解 Jenkins、Docker和Harbor是现代DevOps流程中的核心工具，结合使用可以实现自动化构建、测试和部署。下面我将详细介绍如何搭建这个集成环境。 一、各工具的核心作用 Jenkins 自动化CI/CD工具，负责拉取代…...
Windows 安装Anaconda
一、下载Anaconda 1.阿里云镜像： https://developer.aliyun.com/mirror/ 2.中科大镜像： https://mirrors.ustc.edu.cn/ 二、配置环境变量 Windows： 1.右键“此电脑” → “属性” → “高级系统设置” → “环境变量”25；…...
《微机原理与接口技术》第 8 章 常用接口芯片
8.1 可编程定时/计数器8253/8254 8.1.1 8253的外部引脚及内部结构 8.1.2 8253的工作方式 8.1.3 8253的方式控制字和读/写操作 8.1.4 8253的初始化编程及应用 8.1.5 可编程定时/计数器8254 …… 8.2 可编程并行接口8255 8.2.1 并行通信的概念 （1）…...
upload-labs靶场通关详解：第12-13关
目录 第12关：get00截断 一、分析源代码 二、解题思路 三、解题步骤 第13关：post00截断 一、分析源代码 二、解题思路 三、解题步骤 第12关：get00截断 一、分析源代码 $is_upload false; $msg null; if(isset($_POST[submit])){$ex…...
YOLO模型初次训练体验（+实测）
1.训练目的 做一个简单的示例，本次训练的目的希望模型能够识别桌面的两个图标。（主要是方便准备数据） 2.数据准备 安装一个截图软件，在桌面不同分辨率，不同背景的情况下，随机调整两个图标的位置并截图保存。 原始图片： 先为截图批量重命名： 使用重命名工具，设置命…...
OSA实战笔记二
本文是我在实际项目开发中，总结和归纳的笔记，主要记录了OSA常用的参数释义。 OSA的Params 1、Scroll Sensivity 对⿏标滚轮（或类似）输⼊的敏感度，与通过滚动条拖动或滚动⽆关。 2、Scroll Sensivity On X Axis 对…...
OSI 网络七层模型中的物理层、数据链路层、网络层
一、OSI 七层模型 物理层、数据链路层、网络层、传输层、会话层、表示层、应用层 1. 物理层（Physical Layer） 功能：传输原始的比特流（0和1），通过物理介质（如电缆、光纤、无线电波）…...
如何自学FPGA设计？
众所周知，FPGA设计自学难度不小，更不存在速成的捷径。这里简单说一下学习的规划，希望能给入门者提供一些方向。 学会相应的知识 不论是科班毕业还是理工科专业出身，想要入行FPGA开发，基础知识必须扎实。尤其是在高校…...
leetcode 合并区间 java
用 ArrayList<int[]> merged new ArrayList<>();来定义数组的list将数组进行排序 Arrays.sort(intervals,(a,b) -> Integer.compare(a[0],b[0]));如果前面的末尾>后面的初始，那么新的currentInterval的末尾这两个数组末尾的最大值，即…...
如何将内网的IP地址映射到外网？常见方法及详细步骤
自己计算机搭建网络端口服务，或公司内部本地服务器部署项目后，如果同时需要提供异地互联网上连接使用，就需要将内网IP地址映射到外网上。 将本地网络的内网 IP 地址映射到外网，通常是为了允许外部网络访问内网中的特定服务&#…...
Node.js AI 通义灵码 VSCode 插件安装与功能详解
Node.js 作为基于 Chrome V8 引擎的 JavaScript 运行时，使 JavaScript 成为后端开发的重要选择。 在 Node.js 开发中，使用高效的工具可以显著提升开发效率和代码质量。 通义灵码作为一款智能编码助手，为 Node.js 开发者提供了强大的支持。 …...
Linux中的 I/O 复用机制 select
第一部分：select 基本概念 1.1. I/O 复用的提出：并发处理的挑战 在传统的网络服务模型中，服务器为每一个客户端连接创建一个独立的线程或者进程来处理。这种模式在并发连接数量较少时或许尚能应对，但当并发量显著增大时…...
再议AOI算法
AOI算法优化 首先，需要知道AOI（Area of Interest）是什么。AOI通常用于游戏或者分布式系统中，用来管理玩家或对象的视野范围，只关注感兴趣区域内的其他对象，减少不必要的通信和数据传输。 整理思路 如文章…...
Unreal5 从入门到精通之如何实现 离线语音识别
文章目录 前言将语言服务器作为外部进程运行UE 项目设置开始捕获语音同时运行服务器进程和游戏进程将 SoundWave 而不是麦克风作为输入将数据发送到语言服务器节点的工作原理详细文档前言 今天我们要说的是一个语音转文本（STT）的插件 Offline Speech Recognition, 它支持离线…...
form-create-designer中$inject参数的数据结构及各项属性说明
FcDesigner 是一款基于Vue的开源低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。 …...
WHAT - CSS 中的 min-height
文章目录 语法常见用途1. 防止元素被压缩得太小2. 配合 Flexbox 保证高度3. 用于内容区域动态撑高但不塌陷 与其他属性的区别提示 在 WHAT - CSS 中的 min-width 中我们已经详细介绍过 width。对于高度， CSS 同样提供一个 min-height. min-height 是 CSS 中用于设置…...
：情绪化数字人视频生成)
畅游Diffusion数字人(30)：情绪化数字人视频生成
畅游Diffusion数字人(0)：专栏文章导航 前言：仅从音频生成此类运动极具挑战性，因为它在音频和运动之间存在一对多的相关性。运动视频的情绪是多元化的选择，之前的工作很少考虑情绪化的数字人生成。今天解读一个最新的工作FLOAT&…...