Vue3 —— watchEffect 高级侦听器

  • 该文章是在学习 小满vue3 课程的随堂记录
  • 示例均采用 <script setup>,且包含 typescript 的基础用法

前言

Vue3 中新增了一种特殊的监听器 watchEffect,它的类型是:

function watchEffect(effect: (onCleanup: OnCleanup) => void,options?: WatchEffectOptions
): StopHandle

下面通过实例来理解下它的用法

一、简单使用

  • 第一个参数就是要运行的 副作用函数 effect
  • 函数内 用到哪些数据 才会 监听哪些数据
  • 且会 立刻执行一次(immediate)
<input type="text" v-model="message1" />
<br />
<input type="text" v-model="message2" />
<br />
import { ref, watchEffect } from "vue";const message1 = ref<string>("飞机");
const message2 = ref<string>("火车");watchEffect(() => {console.log("message1========>,", message1);// 不使用 message2 就不会监听 message2// console.log("message2========>,", message2);
});

二、副作用 effect 的参数

  • effect 的参数 也是一个 函数,用来 注册清理回调
  • 清理回调 会在 该副作用下一次执行前被调用,可以用来清理无效的副作用,例如等待中的异步请求
<input type="text" v-model="message1" />
<br />
<input type="text" v-model="message2" />
<br />
import { ref, watchEffect } from "vue";const message1 = ref<string>("飞机");
const message2 = ref<string>("火车");watchEffect((onCleanup) => {console.log("message11111========>,", message1);console.log("message22222========>,", message2);onCleanup(() => {console.log("onCleanup —————— 下一次运行之前要做的事");});
});

页面刷新,首次打印:

在这里插入图片描述

更改输入框的值,再次打印:

在这里插入图片描述

三、watchEffect 返回值

  • 返回值是一个用来 停止侦听器 的函数,调用后不再侦听
  • 需要注意的是:停止时,不影响最后一次 onCleanup 的执行
<input type="text" v-model="message1" />
<br />
<input type="text" v-model="message2" />
<br />
<button @click="stopWatch">停止watchEffect</button>
const stop = watchEffect((onCleanup) => {console.log("message11111========>,", message1);console.log("message22222========>,", message2);onCleanup(() => {console.log("onCleanup —————— 下一次运行之前要做的事");});
});const stopWatch = () => {stop();
};

页面刷新,首次打印:

在这里插入图片描述

更改输入框的值,再次打印:

在这里插入图片描述

点击按钮 停止侦听,再次打印:

在这里插入图片描述

四、options配置

watchEffect 的第二个参数是配置项:

  • flush:watch 的执行顺序
    • pre | post | sync ,默认:pre,具体含义可以看上一篇 watch 中的解释
    • 一般需要在 dom 更新之后再获取的情况,可以设置为 post
  • onTrack 用于开发环境调试
  • onTrigger 用于开发环境调试
<input id="ipt" v-model="iptVal" />
const iptVal = ref<string>("aa");watchEffect(() => {// 测试 flushconst spanEle = document.getElementById("ipt");// flush = pre 时,打印 null; flush = post 时,打印节点console.log("spanEle========>,", spanEle); // 修改 iptVal 测试 onTrack、onTriggerconsole.log("iptVal============>", iptVal.value);},{flush: "post",// 收集依赖时触发onTrack: () => {debugger;},// 更新时触发onTrigger: () => {debugger;},}
);

五、周边 api

  • watchPostEffect()watchEffect() 使用 flush: 'post' 选项时的别名
  • watchSyncEffect()watchEffect() 使用 flush: 'sync' 选项时的别名

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

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

相关文章

整理mongodb文档:find方法查询数据

个人博客 整理mongodb文档:find方法查询数据 求关注&#xff0c;求批评&#xff0c;求指出&#xff0c;如果哪儿不清晰&#xff0c;请指出来&#xff0c;谢谢 文章概叙 如题&#xff0c;本文讲的是如何用find查询数据&#xff0c;如何在数组、字段、对象中查询&#xff0c;以…

自然语言处理技术:NLP句法解析树与可视化方法

自然语言处理(Natural Language Processing,NLP)句法解析树是一种表示自然语言句子结构的图形化方式。它帮助将句子中的每个词汇和短语按照语法规则连接起来,形成一个树状结构,以便更好地理解句子的语法结构和含义。句法解析树对于理解句子的句法关系、依存关系以及语义角…

Python实现轻量级WEB服务器接收HTTP提交的RFID刷卡信息并回应驱动读卡器显示播报语音

本示例使用的设备&#xff1a;RFID网络WIFI无线TCP/UDP/HTTP可编程二次开发读卡器POE供电语音-淘宝网 (taobao.com) # -*- coding: utf-8 -*- import time import datetime import socket import threading#将中文信息转换编码&#xff0c;显示文字、TTS语音都需要转换-------…

从入门到精通Python隧道代理的使用与优化

哈喽&#xff0c;Python爬虫小伙伴们&#xff01;今天我们来聊聊如何从入门到精通地使用和优化Python隧道代理&#xff0c;让我们的爬虫程序更加稳定、高效&#xff01;今天我们将对使用和优化进行一个简单的梳理&#xff0c;并且会提供相应的代码示例。 1. 什么是隧道代理&…

SpringCloud Gateway:status: 503 error: Service Unavailable

使用SpringCloud Gateway路由请求时&#xff0c;出现如下错误 yml配置如下&#xff1a; 可能的一种原因是&#xff1a;yml配置了gateway.discovery.locator.enabledtrue&#xff0c;此时gateway会使用负载均衡模式路由请求&#xff0c;但是SpringCloud Alibaba删除了Ribbon的…

无涯教程-Perl - setpwent函数

描述 此功能将枚举设置(或重置)到密码条目集的开头。应该在第一次调用getpwent之前调用此函数。 语法 以下是此函数的简单语法- setpwent返回值 此函数不返回任何值。 例 以下是显示其基本用法的示例代码- #!/usr/bin/perlwhile(($name, $passwd, $uid, $gid, $quota, …

C++写文件,直接写入结构体

C写文件&#xff0c;直接写入结构体 以前写文件都是写入字符串或者二进制再或者就是一些配置文件&#xff0c;今天介绍一下直接写入结构体&#xff0c;可以在软件参数较多的时候直接进行读写&#xff0c;直接将整个结构体写入和读取&#xff0c;看代码&#xff1a; #include&…

tomcat中的BIO与NIO发展

tomcat中的NIO发展 前言 Tomcat目前支持BIO&#xff08;阻塞 I/O&#xff09;、NIO&#xff08;非阻塞 I/O&#xff09;、AIO&#xff08;异步非阻塞式IO&#xff0c;NIO的升级版&#xff09;、APR&#xff08;Apache可移植运行库&#xff09;模型&#xff0c;本文主要介绍NI…

iceberg系列之 hadoop catalog 小文件合并实战

背景 flink1.15 hadoop3.0pom文件 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://mave…

UBuntu18.04 Qt之双HDMI屏切换

UBuntu18.04 Qt之双HDMI接2个4K屏并分别设置分辨率、主屏、副屏 一、设置HDMI-2为主屏 在main函数里面添加&#xff1a; #include "mainwindow.h" #include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);{long nTotal 0;c…

spring cloud gateway中配置uri

gateway中配置uri配置有三种方式: websocket方式&#xff1a;uri: ws://localhost:9000http方式: uri: http://localhost:8130/lb注册中心配置方式&#xff08;注册的服务名称&#xff09;: uri: lb://monitor-ms gateway的lb方式识别的服务名称命名规则&#xff1a; "[…

设计模式——适配器模式

引入实例 说起适配器其实在我们的生活中是非常常见的&#xff0c;比如&#xff1a;学校的宿舍的电压都比较低&#xff0c;而有的学生想使用大功率电器&#xff0c;宿舍的就会跳闸&#xff0c;然而如果你使用一个适配器&#xff08;变压器&#xff09;就可以使用了&#xff08;…

Jtti:windows虚拟内存最小值太低如何解决

当Windows虚拟内存的最小值设置过低时&#xff0c;可能会导致系统性能下降、应用程序崩溃甚至系统不稳定。解决方法包括&#xff1a; 调整虚拟内存设置&#xff1a; 可以通过以下步骤调整虚拟内存的设置&#xff1a; 右键点击“此电脑”或“计算机”&#xff0c;选择“属性”。…

被迫学习一波Linux命令

事情起因 部署一个服务&#xff0c;人家说了最低配置是3G&#xff0c;我没当回事&#xff0c;拿着个2G的服务器直接就上了&#xff0c;结果&#xff0c;哈哈&#xff0c;都能猜到结果&#xff1a;服务器内存爆了&#xff01;&#xff01;&#xff01;而且最可气的是服务器还登…

ansible案列之LNMP分布式剧本

LNMP分布式剧本 一&#xff1a;环境设置二&#xff1a;编写Nginx剧本准备nginx下载源准备配置文件并开放PHP的访问路径准备php测试页面编写nginx剧本 三&#xff1a;编写Mysql剧本编写密码获取脚本准备Mysql的yum源编写mysql剧本 四&#xff1a;准备PHP剧本准备两个配置文件编写…

深入理解linux内核--块设备驱动程序

块设备的处理 块设备驱动程序上的每个操作都涉及很多内核组件&#xff1b;其中最重要的一些如图14-1所示。 例如&#xff0c;我们假设一个进程在某个磁盘文件上发出一个read()系统调用 ——我们将会看到处理write请求本质上采用同样的方式。 下面是内核对进程请求给予回应的一…

煤矿调度IP语音对讲广播模块一键求助对讲矿用调度通信系统SIP语音对讲求助终端

硬件接口描述 SV-2101VP/ SV-2103VP系列网络音频模块&#xff0c;所有外部连接采用端子&#xff0c;电源采用2.0mm的端子&#xff0c;网络采用标准RJ45连接器&#xff0c;其他都是1.25mm的连接器。 端口类型定义 P ———— 电源 AI ———— 模拟输入&#xff08;在这里是音…

微信小程序前后端开发快速入门(完结篇)

这篇是微信小程序前后端快速入门完结篇了&#xff0c;今天利用之前学习过的所有知识做一个新的项目「群登记助手v1.0」小程序。 整体技术架构&#xff1a;小程序原生前端小程序云开发。 经历了前面教程的学习&#xff0c;大家有了一定的基础&#xff0c;所以本次分享重心主要是…

Ubuntu服务器service版本初始化

下载 下载路径 官网&#xff1a;https://cn.ubuntu.com/ 下载路径&#xff1a;https://cn.ubuntu.com/download 服务器&#xff1a;https://cn.ubuntu.com/download/server/step1 点击下载&#xff08;22.04.3&#xff09;&#xff1a;https://cn.ubuntu.com/download/server…

【Python百日进阶-Web开发-Peewee】Day271 - Peewee API文档 - 字段(二)

文章目录 11.3.17 class UUIDField11.3.18 class BinaryUUIDField11.3.19 class DateTimeField11.3.20 class DateField11.3.21 class TimeField11.3.22 class TimestampField11.3.23 class IPField11.3.24 class BooleanField11.3.25 class BareField11.3.26 class ForeignKey…