Vue3的watch使用介绍及场景
目录
一、watch的使用
1. 监听一个变量
2. 监听一个对象的属性
3. 监听一个函数的返回值
二、watch的使用场景
1. 监听表单的变化
2. 监听路由参数的变化
3. 监听Vuex中的数据变化
三、watch的效果图
四、watch的示例
以上就是Vue3的watch的介绍,watch是Vue3中非常重要的一个功能,可以帮助我们更好的监听数据变化,并执行相应的操作。
Vue3的watch是用于监听Vue实例中的数据变化并执行相应操作的功能。Vue3中对watch的使用进行了优化,并且提供了更强大的功能。下面将对Vue3的watch进行详细介绍。
一、watch的使用
在Vue3中,我们可以使用watch来监听数据的变化,从而执行相应的操作。watch有以下几种使用方式:
1. 监听一个变量
在Vue3中,我们可以使用watch来监听一个变量的变化,当这个变量发生改变时,就会执行相应的操作。具体代码如下:
watch: {name: {handler(newVal, oldVal) {console.log('name变为:', newVal)}}
}
这段代码中,我们监听name这个变量,当name发生变化时,就会执行handler函数。handler函数接收两个参数,分别代表变化后的值和变化前的值。
2. 监听一个对象的属性
在Vue3中,我们同样可以使用watch来监听一个对象的属性的变化。具体代码如下:
watch: {"person.name": {handler(newVal, oldVal) {console.log('person.name变为:', newVal)}}
}
这段代码中,我们监听person对象的name属性,当name属性发生变化时,就会执行handler函数。
3. 监听一个函数的返回值
在Vue3中,我们还可以使用watch来监听一个函数的返回值的变化。具体代码如下:
watch: {fullName: {handler(newVal, oldVal) {console.log('fullName变为:', newVal)},immediate: true}
},
computed: {fullName() {return this.firstName + ' ' + this.lastName}
}
这段代码中,我们监听computed中的fullName函数的返回值,当fullName的返回值发生变化时,就会执行handler函数。immediate为true表示在watch被建立后,立即执行handler函数。
二、watch的使用场景
1. 监听表单的变化
在Vue3中,我们可以使用watch来监听表单的变化。具体代码如下:
watch: {formData: {handler(newVal, oldVal) {console.log('formData变为:', newVal)},deep: true}
},
data() {return {formData: {name: '',age: 18}}
}
这段代码中,我们监听formData对象的变化,deep为true表示深度监听,也就是说,当formData内部的属性发生变化时,也会触发handler函数。
2. 监听路由参数的变化
在Vue3中,我们可以使用watch来监听路由参数的变化,从而执行相应的操作。具体代码如下:
watch: {$route(to, from) {console.log('路由变化:', to, from)}
}
这段代码中,我们监听$router对象的变化,当路由发生变化时,就会触发handler函数。
3. 监听Vuex中的数据变化
在Vue3中,我们可以使用watch来监听Vuex中的数据变化,从而执行相应的操作。具体代码如下:
import { mapState } from 'vuex'export default {computed: {...mapState(['count'])},watch: {count(newVal, oldVal) {console.log('count变为:', newVal)}}
}
这段代码中,我们监听Vuex中的count数据的变化,当count发生变化时,就会触发handler函数。
三、watch的效果图
当我们对监听的数据进行修改时,就会触发watch中的handler函数,从而执行相应的操作。

四、watch的示例
下面是一个完整的示例,演示了如何使用watch来进行表单校验。
<template><div><input v-model="formData.name" @input="handleInput"><input v-model="formData.age" @input="handleInput"><p v-show="errorMessage" style="color: red">{{ errorMessage }}</p></div>
</template><script>
export default {data() {return {formData: {name: '',age: ''},errorMessage: ''}},watch: {formData: {handler(newVal, oldVal) {if (newVal.name.trim() === '') {this.errorMessage = '姓名不能为空'} else if (newVal.age.trim() === '') {this.errorMessage = '年龄不能为空'} else if (!/^\d+$/.test(newVal.age)) {this.errorMessage = '年龄必须为数字'} else {this.errorMessage = ''}},deep: true}},methods: {handleInput() {this.$forceUpdate()}}
}
</script>
这段代码中,我们使用watch来监听formData对象的变化,当formData发生变化时,就会触发handler函数。在handler函数中,我们判断formData中的数据是否符合要求,如果符合要求就清空errorMessage,否则就设置errorMessage的值。在template中,我们根据errorMessage来显示错误提示信息。
以上就是Vue3的watch的介绍,watch是Vue3中非常重要的一个功能,可以帮助我们更好的监听数据变化,并执行相应的操作。
相关文章:
Vue3的watch使用介绍及场景
目录 一、watch的使用 1. 监听一个变量 2. 监听一个对象的属性 3. 监听一个函数的返回值 二、watch的使用场景 1. 监听表单的变化 2. 监听路由参数的变化 3. 监听Vuex中的数据变化 三、watch的效果图 四、watch的示例 以上就是Vue3的watch的介绍,watch是…...
Java设计原则和设计模式
目录 第一部分:设计原则 单一职责原则 (Single Responsibility Principle)开闭原则 (Open-Closed Principle)里氏替换原则 (Liskov Substitution Principle)接口隔离原则 (Interface Segregation Principle)依赖倒置原则 (Dependency Inversion Principle)合成/聚…...
webshell之基于框架免杀
thinkphp array_map_recursive函数 array_map_recursive函数分析 这里存在一个call_user_func命令执行函数 免杀效果 B函数 免杀效果 B函数分析 exec函数分析 在exec函数用存在有个类调用,且所有的参数都可控 smarty_php_tag函数 免杀效果 smarty_php_tag函数分析…...
QT QJsonObject 插入 QByteArray十六进制数据
场景描述 有一组十六进制数使用QByteArray进行存储;需要将其插入QJsonObject,然后通过网络发送出去;接收到后,再转换回QByteArray; 操作代码 1. QByteArray转换QString插入QJsonObject QString str ""; …...
概要设计文档案例分享
1引言 1.1编写目的 1.2项目背景 1.3参考资料 2系统总体设计 2.1整体架构 2.2整体功能架构 2.3整体技术架构 2.4运行环境设计 2.5设计目标 3系统功能模块设计 3.1个人办公 4性能设计 4.1响应时间 4.2并发用户数 5接口设计 5.1接口设计原则 5.2接口实现方式 6运行设计 6.1运行模块…...
微服务qiankun通信方式
qiankun: 是一种类似于微服务的架构,是将一个大型应用拆分成若干个更小、更简单,可以独立开发、测试和部署的子应用,然后由一个基座应用根据路由进行应用切换,主要是为了解决大型工程在变更、维护、扩展等方面的困难而…...
【Azure 架构师学习笔记】-Azure Storage Account(7)- 权限控制
本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Storage Account】系列。 接上文 【Azure 架构师学习笔记】-Azure Storage Account(6)- File Layer 前言 存储帐户作为其中一个数据终端存储,对安全性的要求非常高,不管…...
听GPT 讲Rust源代码--src/tools(2)
题图来自AI生成 File: rust/src/tools/rust-installer/src/util.rs 在Rust源代码中,rust/src/tools/rust-installer/src/util.rs文件是安装程序的一个辅助文件,它提供了一些实用函数和结构体来处理安装过程中需要的一些操作。 这个文件中定义了几个结构体…...
【python学习】基础篇-常用模块-collections模块:数据结构,如列表、元组、字典和集合等
Python中的collections模块提供了一些有用的数据结构,如列表、元组、字典和集合等。 以下是collections模块中一些常用数据结构的用法: Counter类 Counter类是一个字典子类,用于计数可哈希对象。 它可以接受一个可迭代对象作为参数ÿ…...
【电路笔记】-电源电压
电源电压 文章目录 电源电压1、概述1.1 交流发电机1.2 电池1.3 理想电压源1.4 实际电压源1.5 连接规则 2、相关源2.1 压控电压源 (VCVS)2.2 电流控制电压源 (CCVS) 3、总结 在本文中,我们详细介绍了称为电源电压的重要电子元件的架构、功能和使用。 我们首先提出理想…...
kali部署ARL灯塔资产系统及使用教程
网上有很多ARL部署到centos系统的教程,但是部署到ubuntu或kali linux系统的教程都是乱七八糟,互相抄,而且没有一个能部署成功,鉴于此,写下此教程,帮助大家出坑 一、安装docker环境(网上什么弄钥匙呀,什么稳定源啊都是垃圾) 准备一个纯净的最新的kali linux系统 1、配…...
一、用户管理
一、后端数据库初始化 1.1 因为版本问题,始终报错,按照报错信息去查询解决方案,无法解决 灵机一动: 网址: Spring Boot 3.0 升级 实战踩坑记录 - 掘金 (juejin.cn) 1.2 个人配置【运行成功…...
Could not publish to the server. java.lang.NullPointerException
publishing to tomcat v8.0 server at localhost has encontered a problem. Could not publish to the server. java.lang.NullPointerException 解决办法: 关闭eclipse在自己设置的workspace目录下面,打开目录:.metadata.plugins\org.ecl…...
SpringMVC(三)
十、拦截器 1、拦截器的配置 SpringMVC中的拦截器用于拦截控制器方法的执行 SpringMVC中的拦截器需要实现HandlerInterceptor SpringMVC的拦截器必须在SpringMVC的配置文件中进行配置: <bean class"com.atguigu.interceptor.FirstInterceptor">…...
打印菱形-第11届蓝桥杯选拔赛Python真题精选
[导读]:超平老师的Scratch蓝桥杯真题解读系列在推出之后,受到了广大老师和家长的好评,非常感谢各位的认可和厚爱。作为回馈,超平老师计划推出《Python蓝桥杯真题解析100讲》,这是解读系列的第9讲。 打印菱形ÿ…...
『亚马逊云科技产品测评』活动征文|搭建Squoosh图片在线压缩工具
搭建Squoosh图片在线压缩工具 前言一、Squoosh是什么?二、准备一台Lightsail实例1.进入控制台2.创建实例3.开放端口4.部署Squoosh5.预览 三、搭建反向代理1. 安装宝塔2. 配置反向代理3. 预览代理效果 提示:授权声明:本篇文章授权活动官方亚马…...
基于亚马逊云科技大语言模型等服务打造企业知识库
背景 大语言模型是自然语言处理领域的一项重要技术,能够通过学习大量的文本数据,生成具有语法和意义的自然语言文本。目前大语言模型已经成为了自然语言处理领域的一个热门话题,引起了广泛的关注和研究。 知识库需求在各行各业中普遍存在&a…...
FFmpeg 使用
添加关键帧 被压缩过的视频丢失关键帧导致seekTo无效,需要给视频添加关键帧 ffmpeg -i 2.mp4 -c:v libx264 -x264opts keyint5 -y keyint10.mp4修改分辨率 -i /sdcard/bankinfo/-484870439.mp4 -vf scale1920:1080 -threads 5 -preset ultrafast -y /sdcard/ban…...
NLP的使用
参考: Apache openNLP 简介 - 链滴 (ld246.com) opennlp 模型下载地址:Index of /apache/opennlp/models/ud-models-1.0/ (tencent.com) OpenNLP是一个流行的开源自然语言处理工具包,它提供了一系列的NLP模型和算法。然而,Open…...
Navicat DML 操作
在表格种插入 列信息 -- 修改数据 update 表名 set 列名 值1, 列名值2,[where 条件]; -- 注意:如果update语句没有加where 表里对应行的全部信息都会被改; -- 删除数据 delecte from 表名 [where 条件]; 未删除前: 执行删除后为: DQL - 条…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源(HTML/CSS/图片等),响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址,提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
前端倒计时误差!
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区养老保险系统小程序被用户普遍使用,为方…...
回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...
c# 局部函数 定义、功能与示例
C# 局部函数:定义、功能与示例 1. 定义与功能 局部函数(Local Function)是嵌套在另一个方法内部的私有方法,仅在包含它的方法内可见。 • 作用:封装仅用于当前方法的逻辑,避免污染类作用域,提升…...
Visual Studio Code 扩展
Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后,命令 changeCase.commands 可预览转换效果 EmmyLua…...
热门Chrome扩展程序存在明文传输风险,用户隐私安全受威胁
赛门铁克威胁猎手团队最新报告披露,数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据,严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能,但SEMR…...
TJCTF 2025
还以为是天津的。这个比较容易,虽然绕了点弯,可还是把CP AK了,不过我会的别人也会,还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...
