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效果图](https://img-blog.csdnimg.cn/20211117173434849.png)

四、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中非常重要的一个功能,可以帮助我们更好的监听数据变化,并执行相应的操作。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/155074.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python保存文件到zip压缩包中

这里我们使用zipfile这个库进行操作&#xff0c;保存压缩文件相对简单&#xff0c;只需要指定文件名即可&#xff0c;不需要读取那个文件&#xff1a; with zipfile.ZipFile("zip文件路径", mode, zipfile.ZIP_DEFLATED) as z:z.write("压缩源文件路径", …

MAX/MSP SDK学习01:Object的基本构成、创建销毁行为函数的定义、属性的赋值、以及相关注意事项

Object的基本构成、创建&销毁&行为函数的定义、属性的赋值、以及相关注意事项。 #include "ext.h" // standard Max include, always required #include "ext_obex.h" // required for new style Max object// object struct&#xff0c;定义属…

G管螺纹尺寸对照表

G管螺纹尺寸对照表 NPT 是 National (American) Pipe Thread 的缩写&#xff0c;属于美国标准的 60 度锥管螺纹&#xff0c;用于北美地区&#xff0e;国家标准可查阅 GB/T12716-1991 PT 是 Pipe Thread 的缩写&#xff0c;是 55 度密封圆锥管螺纹&#xff0c;属惠氏螺纹家族&a…

微服务学习|Gateway网关:网关作用、快速入门、路由断言工厂、路由过滤器配置、全局过滤器、过滤器执行顺序、跨域问题处理

为什么需要网关 网关功能: 1.身份认证和权限校验 2.服务路由、负载均衡 3.请求限流 网关的技术实现 在SpringCloud中网关的实现包括两种:gateway、zuul Zuul是基于Servlet的实现&#xff0c;属于阻塞式编程。而SprinaCloudGateway则是基于Spring5中提供的WebFlux&#xf…

最新PS 2024 虎标正式版来啦,附带AI神经滤镜(支持win/mac)

软件简介 文件名称 PS2024 虎标正式版 支持系统 windows、Mac 获取方式 文章底部 分享形式 百度网盘 小伙伴们&#xff0c;下午好&#xff01;今天给大家的是PS 2024 25.0虎标正式版。 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 添加图片注释…

机器学习介绍与分类

随着科学技术的不断发展&#xff0c;机器学习作为人工智能领域的重要分支&#xff0c;正逐渐引起广泛的关注和应用。本文将介绍机器学习的基本概念、原理和分类方法&#xff0c;帮助读者更好地理解和应用机器学习技术。 一、机器学习的基本概念 机器学习是一种通过从数据中学…

了解一下公网IP和域名的区别与联系

​  公网IP和域名是互联网中两个重要的概念&#xff0c;它们在网络通信和网站访问中起着不同的作用。 我们来了解一下公网IP。公网IP是指在全球范围内唯一的IP地址&#xff0c;用于标识互联网上的设备。每个设备连接到互联网时都会被分配一个公网IP地址&#xff0c;这个地址可…

人机交互——自然语言生成

自然语言生成是让计算机自动或半自动地生成自然语言的文本。这个领域涉及到自然语言处理、语言学、计算机科学等多个领域的知识。 1.简介 自然语言生成系统可以分为基于规则的方法和基于统计的方法两大类。基于规则的方法主要依靠专家知识库和语言学规则来生成文本&#xff0…

MySQL之JDBC编程

目录 1. 数据库编程的必备条件 2. Java的数据库编程&#xff1a;JDBC 3. JDBC工作原理 4. JDBC使用 4.1 IDEA配置JDBC 4.2 JDBC开发案例 4.3 JDBC使用步骤总结 5. JDBC常用接口和类 5.1 JDBC API 5.2 数据库连接Connection 5.3 Statement对象 5.4 ResultS…

电脑便签功能在哪里找?电脑桌面便签怎么添加?

很多上班族在使用电脑办公的时候&#xff0c;都需要随手记录工作事项&#xff0c;例如记录共同工作时的想法、会议笔记、常用工作资料、每天待办的工作任务等事项&#xff0c;这时候使用纸质的笔记本来记录工作&#xff0c;不仅不方便随时查看和使用&#xff0c;而且在修改、删…

HarmonyOS ArkTSTabs组件的使用(六)

Tabs组件的使用 ArkUI开发框架提供了一种页签容器组件Tabs&#xff0c;开发者通过Tabs组件可以很容易的实现内容视图的切换。页签容器Tabs的形式多种多样&#xff0c;不同的页面设计页签不一样&#xff0c;可以把页签设置在底部、顶部或者侧边。 Tabs组件的简单使用 Tabs组件…

报错注入 [极客大挑战 2019]HardSQL1

打开题目 输入1或者1"&#xff0c;页面均回显NO,Wrong username password&#xff01;&#xff01;&#xff01; 那我们输入1 试试万能密码 1 or 11 # 输入1 and 12 # 输入1 union select 1,2,3 # 输入1 ununionion seselectlect 1,2,3 # 输入1 # 输入1# 页面依旧回…

mac 和 windows 相互传输文件【共享文件夹】

文章目录 前言创建共享文件夹mac 连接共享文件夹 前言 温馨提示&#xff1a;mac 电脑和 windows 电脑必须处于同一局域网下 本文根据创建共享文件夹的方式实现文件互相传输&#xff0c;所以两台电脑必须处于同一网络 windows 创建共享文件夹&#xff0c;mac 电脑通过 windows…

C++11新特性 变参模板、完美转发和emplace

#include <iostream> #include <vector> #include <deque> #include <list> #include <algorithm> using namespace std;class student { public:student() {cout << "无参构造函数被调用!" << endl;}student(int age, st…

PyQt(学习笔记)

学习资料来源&#xff1a; PyQt快速入门——b站王铭东老师 PyQt官网的所有模块 C具体实现的官方文档 PyQt&#xff08;学习笔记&#xff09; PyCharm环境准备运行第一个程序QPushButtonQLabelQLineEdit调整窗口大小、位置、图标布局信号与槽PyQt引入多线程 PyCharm环境准备 新…

yum 搭建仓库 http/ftp

目录 http ftp http 服务端 1. 下载 httpd 服务&#xff0c;记得将防火墙和安全终端全部关掉 2. 开启 httpd 服务 3. 临时挂载 客户端 1. 下载 httpd 服务&#xff0c;记得将防火墙和安全终端全部关掉 2. 开启 httpd 服务 3. 进入 /etc/yum.repos.d 4. 新建一个目录 mhy&…

新零售数字化系统提供商怎么选择?2023十大收银系统排行榜-亿发

随着零售业务的日益繁荣和电子商务的迅猛发展&#xff0c;零售收银系统已成为各类商家提高效率、管理库存、提供更好服务的不可或缺的工具。然而&#xff0c;在众多的收银系统中&#xff0c;如何选择一款适合自己的&#xff0c;一直是许多商家头疼的问题。今天我们就来盘点一下…

用Auth Analyzer插件批量测试接口越权,安全测试快人一步!

随着信息化技术的不断发展&#xff0c;软件安全成了软件行业的重大挑战&#xff0c;因此安全测试也成为了测试人员必备的技能之一。 沐沐在安全测试过程中较为常见的就是接口越权漏洞&#xff0c;在尝试过多种工具进行越权漏洞测试后&#xff0c;最终找到了个人认为最便捷最有…

java springboot 监控线程池的状态

Autowiredprivate Executor personInfoTaskExecutor;/*** 监控线程池状态* return*/GetMapping("asyncExceutorInfo")public Map getThreadInfo() {Map map new HashMap();Object[] myThread {personInfoTaskExecutor};for (Object thread : myThread) {ThreadPoolT…

Git教程1:生成和提交SSH公钥到远程仓库

要生成 Git 的公钥并将其提交到远程仓库&#xff0c;你可以按照以下步骤进行操作&#xff1a; 打开命令行终端&#xff0c;并确保已经安装了 Git。在终端中输入以下命令来生成 SSH 密钥对&#xff1a;ssh-keygen -t rsa -b 4096 -C "your_emailexample.com"这将生成…