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 - 条…...
Spring Boot面试题精选汇总
🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...
从零实现STL哈希容器:unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说,直接开始吧! 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念,确保一个租户(在这个系统中可能是一个公司或一个独立的客户)的数据对其他租户是不可见的。在 RuoYi 框架(您当前项目所使用的基础框架)中,这通常是通过在数据表中增加一个…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
动态 Web 开发技术入门篇
一、HTTP 协议核心 1.1 HTTP 基础 协议全称 :HyperText Transfer Protocol(超文本传输协议) 默认端口 :HTTP 使用 80 端口,HTTPS 使用 443 端口。 请求方法 : GET :用于获取资源,…...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程,系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态
前言 在人工智能技术飞速发展的今天,深度学习与大模型技术已成为推动行业变革的核心驱动力,而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心,系统性地呈现了两部深度技术著作的精华:…...
Axure 下拉框联动
实现选省、选完省之后选对应省份下的市区...
