当前位置: 首页 > news >正文

Vue 3第九章:WatchEffect高级侦听器

文章目录

    • 1. WatchEffect高级侦听器
      • 1.1. 使用 watchEffect 函数
      • 1.2. 停止侦听
      • 1.3. 侦听多个状态
      • 1.4. 懒执行
    • 总结

1. WatchEffect高级侦听器

在 Vue 3 中,我们可以使用 watchEffect 函数来创建高级侦听器。与 watchcomputed 不同,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. 停止侦听

watchcomputed 不同,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.count1state.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 中的一个新特性,它可以用来创建高级侦听器,自动追踪响应式状态的变化,并在变化时重新运行。与 watchcomputed 不同,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]); …...

又是活动 没啥好说的 送代码

说明这里又一段代码&#xff1a;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报文格式如图&#xff1a; 字段1&#xff1a;ARP请求的目的以太网地址&#xff0c;全1时&#xff0c;代表广播地址。 字段2&#xff1a;发送ARP请求的以太网地址。 字段3&#xff1a;以太网帧类型表示后面的数据类型&#xff0c;ARP请求和ARP应答此字段为&#xff1a;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、方法一&#xff1a;在系统的配置文件中设置 2.2、方法二&#xff1a;在 application.properies 中配置 三、统一异常处理 四、统一返回数据返回格式处理 4.1、背景 4.2、…...

规划数据指标体系方法(下)——新海盗模型

前面已经跟大家分享了规划数据指标体系的两种方法—— OSM 和 UJM 模型&#xff0c;分别从目标-策略以及用户旅途的角度阐述了规划数据指标体系的过程。今天我来跟大家分享最后一种规划数据指标体系的方法——新海盗模型。 了解新海盗模型 海盗模型&#xff0c;即 AARRR 模型&…...

UML学习备忘录

UML学习备忘录 UML 全称是 Unified Modeling Language&#xff08;统一建模语言&#xff09;&#xff0c;它以图形的方式来描述软件的概念。它的特点是简单、统一、图形化、能表达软件设计中的动态与静态信息。UML的本质就是为了交流。 UML的概念包括了UML语义&#xff08;Se…...

Vue3手写分页在分页的基础上用到Pagination 分页组件

近期有个项目要用到分页组件&#xff0c;但是内容不是表格&#xff0c;所以自己就研究了一下在Pagination 分页组件的基础上手写了分页 效果图&#xff1a; 目录 一、先声明几个变量用来定义第几页&#xff0c;每页多少条&#xff0c;总页数。 二、然后封装一个函数方便以后…...

冥想第七百二十四天

1.今天感谢徐工的款待&#xff0c;请教了学习日语的一个方法就是把听力复述出来。 2.今天感觉运动量特别少&#xff0c;于是就下班跑了6公里&#xff0c;状态良好。 3.觉得出来出差真的好轻松&#xff0c;有点不适应了。感谢生活给我的奖励 好幸福呀。 4.感谢父母&#xff0c;感…...

Jenkins+Docker自动化部署项目

看到了一篇文章&#xff0c;实操一下自动部署的感觉。参看地址&#xff1a;原文 首先更新docker&#xff0c;我更新到了 [rootlocalhost springboot]# docker --version Docker version 23.0.1, build a5ee5b1跟新步骤&#xff1a; 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的驱动装好了&#xff0c;尝试了命令安装&#xff0c;源码安装&#xff0c;前前后后搞了三遍…...

Sentinel架构篇 - 来源访问控制

来源访问控制&#xff08;黑白名单&#xff09; 概念 Sentinel 提供了黑白名单限制资源能否通过的功能。如果配置了白名单&#xff0c;则只有位于白名单的请求来源的对应的请求才能通过&#xff1b;如果配置了黑名单&#xff0c;则位于黑名单的请求来源对应的请求不能通过。 …...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...