Vue 3第九章:WatchEffect高级侦听器
文章目录
- 1. WatchEffect高级侦听器
- 1.1. 使用 watchEffect 函数
- 1.2. 停止侦听
- 1.3. 侦听多个状态
- 1.4. 懒执行
- 总结
1. WatchEffect高级侦听器
在 Vue 3 中,我们可以使用 watchEffect 函数来创建高级侦听器。与 watch 和 computed 不同,watchEffect 不需要指定依赖项,它会自动追踪响应式状态的变化,并在变化时重新运行。
1.1. 使用 watchEffect 函数
下面是一个简单的示例,使用 watchEffect 函数来侦听一个响应式状态,并在状态变化时输出一条消息:
import { reactive, watchEffect } from 'vue';const state = reactive({count: 0,
});watchEffect(() => {console.log(`Count is now: ${state.count}`);
});// 改变状态,输出 Count is now: 1
state.count++;
在上面的示例中,我们使用 reactive 函数来创建一个响应式对象 state,并使用 watchEffect 函数来创建一个侦听器。watchEffect 函数接受一个函数作为参数,这个函数会被自动运行,并在其中使用响应式状态。当其中任何一个响应式状态发生变化时,这个函数会被重新运行。
1.2. 停止侦听
与 watch 和 computed 不同,watchEffect 函数不会返回一个停止侦听的函数。如果我们需要停止侦听,我们可以将 watchEffect 的返回值设为 null,例如:
import { reactive, watchEffect } from 'vue';const state = reactive({count: 0,
});const stop = watchEffect(() => {console.log(`Count is now: ${state.count}`);
});// 改变状态,输出 Count is now: 1
state.count++;// 停止侦听
stop();
在上面的示例中,我们将 watchEffect 的返回值保存到一个变量 stop 中,然后在需要停止侦听时调用这个函数。
1.3. 侦听多个状态
如果需要侦听多个响应式状态,我们可以在 watchEffect 函数中使用这些状态,并在函数中返回一个计算值,例如:
import { reactive, watchEffect } from 'vue';const state = reactive({count1: 0,count2: 0,
});watchEffect(() => {const sum = state.count1 + state.count2;console.log(`Sum is now: ${sum}`);
});// 改变状态,输出 Sum is now: 1
state.count1++;// 改变状态,输出 Sum is now: 3
state.count2 += 2;
在上面的示例中,我们使用 reactive 函数创建一个响应式对象 state,并在 watchEffect 函数中使用了 state.count1 和 state.count2 两个响应式状态,然后计算了这两个状态的和,并输出了这个和。
1.4. 懒执行
与 computed 类似,watchEffect 函数也支持懒执行(lazy evaluation)。如果我们将 watchEffect 的第二个参数设置为 { lazy: true },则这个函数会在第一次访问响应式状态时才会被运行,例如:
import { reactive, watchEffect } from 'vue';const state = reactive({count: 0,
});watchEffect(() => {console.log(`Count is now: ${state.count}`);},{ lazy: true }
);// 访问状态,输出 Count is now: 1
state.count++;
在上面的示例中,我们将 watchEffect 的第二个参数设置为 { lazy: true },然后在代码中访问了响应式状态 state.count。这时,watchEffect 中的函数才会被运行。
总结
watchEffect 函数是 Vue 3 中的一个新特性,它可以用来创建高级侦听器,自动追踪响应式状态的变化,并在变化时重新运行。与 watch 和 computed 不同,watchEffect 不需要指定依赖项,它会自动追踪响应式状态的变化。如果需要停止侦听,我们可以将 watchEffect 的返回值设为 null。如果需要侦听多个响应式状态,我们可以在 watchEffect 函数中使用这些状态,并在函数中返回一个计算值。watchEffect 函数也支持懒执行(lazy evaluation),可以在第一次访问响应式状态时才会被运行。
相关文章:
Vue 3第九章:WatchEffect高级侦听器
文章目录1. WatchEffect高级侦听器1.1. 使用 watchEffect 函数1.2. 停止侦听1.3. 侦听多个状态1.4. 懒执行总结1. WatchEffect高级侦听器 在 Vue 3 中,我们可以使用 watchEffect 函数来创建高级侦听器。与 watch 和 computed 不同,watchEffect 不需要指…...
c++基础——函数
函数的声明编程中的函数(function)一般是若干语句的集合。我们也可以将其称作“子过程(subroutine)”。在编程中,如果有一些重复的过程,我们可以将其提取出来,形成一个函数。函数可以接收若干值…...
DPDK系列之七DPDK中的虚拟化支持
一、DPDK和虚拟化 DPDK中大幅优化了网络通信的效率,这里也重点对网卡的虚拟化进行分析。在前面的文章中的学习可以判定网卡基本属于IO虚拟化。但是,虚拟化又有IO全虚拟化和IO半虚拟化之分,那么在DPDK中使用的哪种呢?IO虚拟化一般…...
设计模式~桥接模式(bridge)-14
目录 (1)优点: (2)缺点: (3)使用场景: (4)注意事项: (5)应用实例: 代码 桥接(Bridge)是用于把抽象化与实现化解耦,使得二者可以独立变化。这种类型的设计模式属于结构型模式&a…...
Java项目3 电子邮件
文章目录发电子邮件发电子邮件 RequestMapping("/sendmail")ResponseBodypublic String sendMail(Email email, HttpServletRequest request,HttpServletResponse response){HttpSession session request.getSession();SimpleMailMessage message new SimpleMailMe…...
设计模式~访问者模式(Visitor)-15
在访问者模式(Visitor Pattern)中,我们使用了一个访问者类,它改变了元素类的执行算法。通过这种方式,元素的执行算法可以随着访问者改变而改变。这种类型的设计模式属于行为型模式。根据模式,元素对象已接受…...
实战小项目之视频监控(1-1)
实战小项目之视频监控(1-1) 目前常见的视频监控和视频直播都是使用了 RTMP 和 RTSP 流媒体传输协议等。 RTSP(Real-Time Stream Protocol)由 Real Networks 和 Netscape 共同提出的,基于文本的多媒体播放 控制协议。…...
DEJA_VU3D - Cesium功能集 之 103-直角箭头(标绘+编辑)
前言 编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合,有自己琢磨实现的,也有参考其他大神后整理实现的,初步算了算现在有差不多实现小140个左右的功能,后续也会不断的追加,所以暂时打算一周2-3更的样子来更新本专栏(每篇博文都会奉上完整demo的源代码,…...
Vue 对象扩展运算符(…)
当编写一个方法时,我们允许它传入的参数是不确定的。这时候可以使用对象扩展运算符来作参数,看一个简单的列子: 1 2 3 4 5 6 7 8 function jspang(...arg){ console.log(arg[0]); console.log(arg[1]); console.log(arg[2]); …...
又是活动 没啥好说的 送代码
说明这里又一段代码:import time y 2.5 while y>-1.6:x -3.0while x<4.0:if (x*xy*y-1)**3<3.6*x*x*y*y*y or (x>-2.4 and x<-2.1 and y<1.5 and y>-1) or (((x<2.5 and x>2.2)or(x>3.4 and x<3.7)) and y>-1 and y<1.5) …...
ARP报文内容详细分析
ARP报文格式如图: 字段1:ARP请求的目的以太网地址,全1时,代表广播地址。 字段2:发送ARP请求的以太网地址。 字段3:以太网帧类型表示后面的数据类型,ARP请求和ARP应答此字段为:0x0806…...
js一键保存当前页面所有图片
<html> <head> <head><meta charset"utf-8" name”viewport”content”widthdevice-width,initial-scale1″/></head> <title>一键保存</title><link rel"shortcut icon" href"n2.ico" type"…...
【Spring AOP】如何统一“拦截器校验、数据格式返回、异常返回”处理?
目录 一、Spring 拦截器 1.1、背景 1.2、实现步骤 1.3、拦截原理 二、 统一url前缀路径 2.1、方法一:在系统的配置文件中设置 2.2、方法二:在 application.properies 中配置 三、统一异常处理 四、统一返回数据返回格式处理 4.1、背景 4.2、…...
规划数据指标体系方法(下)——新海盗模型
前面已经跟大家分享了规划数据指标体系的两种方法—— OSM 和 UJM 模型,分别从目标-策略以及用户旅途的角度阐述了规划数据指标体系的过程。今天我来跟大家分享最后一种规划数据指标体系的方法——新海盗模型。 了解新海盗模型 海盗模型,即 AARRR 模型&…...
UML学习备忘录
UML学习备忘录 UML 全称是 Unified Modeling Language(统一建模语言),它以图形的方式来描述软件的概念。它的特点是简单、统一、图形化、能表达软件设计中的动态与静态信息。UML的本质就是为了交流。 UML的概念包括了UML语义(Se…...
Vue3手写分页在分页的基础上用到Pagination 分页组件
近期有个项目要用到分页组件,但是内容不是表格,所以自己就研究了一下在Pagination 分页组件的基础上手写了分页 效果图: 目录 一、先声明几个变量用来定义第几页,每页多少条,总页数。 二、然后封装一个函数方便以后…...
冥想第七百二十四天
1.今天感谢徐工的款待,请教了学习日语的一个方法就是把听力复述出来。 2.今天感觉运动量特别少,于是就下班跑了6公里,状态良好。 3.觉得出来出差真的好轻松,有点不适应了。感谢生活给我的奖励 好幸福呀。 4.感谢父母,感…...
Jenkins+Docker自动化部署项目
看到了一篇文章,实操一下自动部署的感觉。参看地址:原文 首先更新docker,我更新到了 [rootlocalhost springboot]# docker --version Docker version 23.0.1, build a5ee5b1跟新步骤: yum update#卸载旧版本 yum remove dock…...
TX2配置RealSense D455相机SDK和ros驱动
TX2配置RealSense D455相机SDK和ros驱动1 SDK安装2 RealSense-ros安装3 bug及解决3.1 realsense-viewer显示usb2.13.2 Could not found ddynamic_reconfigure折腾了两天终于把realsense的驱动装好了,尝试了命令安装,源码安装,前前后后搞了三遍…...
Sentinel架构篇 - 来源访问控制
来源访问控制(黑白名单) 概念 Sentinel 提供了黑白名单限制资源能否通过的功能。如果配置了白名单,则只有位于白名单的请求来源的对应的请求才能通过;如果配置了黑名单,则位于黑名单的请求来源对应的请求不能通过。 …...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2
每日一言 今天的每一份坚持,都是在为未来积攒底气。 案例:OLED显示一个A 这边观察到一个点,怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 : 如果代码里信号切换太快(比如 SDA 刚变,SCL 立刻变&#…...
Java求职者面试指南:计算机基础与源码原理深度解析
Java求职者面试指南:计算机基础与源码原理深度解析 第一轮提问:基础概念问题 1. 请解释什么是进程和线程的区别? 面试官:进程是程序的一次执行过程,是系统进行资源分配和调度的基本单位;而线程是进程中的…...
快刀集(1): 一刀斩断视频片头广告
一刀流:用一个简单脚本,秒杀视频片头广告,还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农,平时写代码之余看看电影、补补片,是再正常不过的事。 电影嘛,要沉浸,…...
实战三:开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用,用户可以通过网页界面上传黑白视频,系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观,不需要了解技术细节。 效果图 二、实现思路 总体思路: 用户通过Gradio界面上…...
密码学基础——SM4算法
博客主页:christine-rr-CSDN博客 专栏主页:密码学 📌 【今日更新】📌 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 编辑…...
接口 RESTful 中的超媒体:REST 架构的灵魂驱动
在 RESTful 架构中,** 超媒体(Hypermedia)** 是一个核心概念,它体现了 REST 的 “表述性状态转移(Representational State Transfer)” 的本质,也是区分 “真 RESTful API” 与 “伪 RESTful AP…...
