vue 侦听器(二)

即时回调的侦听器

watch 默认是懒执行的:仅当数据源变化时,才会执行回调。但在某些场景中,我们希望在创建侦听器时,立即执行一遍回调。举例来说,我们想请求一些初始数据,然后在相关状态更改时重新请求数据。

我们可以通过传入 immediate: true 选项来强制侦听器的回调立即执行:

watch(source,(newValue, oldValue) => {// 立即执行,且当 `source` 改变时再次执行},{ immediate: true }
)

一次性侦听器 

每当被侦听源发生变化时,侦听器的回调就会执行。如果希望回调只在源变化时触发一次,请使用 once: true 选项。

watch(source,(newValue, oldValue) => {// 当 `source` 变化时,仅触发一次},{ once: true }
)

 

watchEffect()

侦听器的回调使用与源完全相同的响应式状态是很常见的。例如下面的代码,在每当 todoId 的引用发生变化时使用侦听器来加载一个远程资源:

const todoId = ref(1)
const data = ref(null)watch(todoId,async () => {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)data.value = await response.json()},{ immediate: true }
)

特别是注意侦听器是如何两次使用 todoId 的,一次是作为源,另一次是在回调中。

我们可以用 watchEffect 函数 来简化上面的代码。watchEffect() 允许我们自动跟踪回调的响应式依赖。上面的侦听器可以重写为:

watchEffect(async () => {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)data.value = await response.json()
})

这个例子中,回调会立即执行,不需要指定 immediate: true。在执行期间,它会自动追踪 todoId.value 作为依赖(和计算属性类似)。每当 todoId.value 变化时,回调会再次执行。有了 watchEffect(),我们不再需要明确传递 todoId 作为源值。

你可以参考一下这个例子的 watchEffect 和响应式的数据请求的操作。

对于这种只有一个依赖项的例子来说,watchEffect() 的好处相对较小。但是对于有多个依赖项的侦听器来说,使用 watchEffect() 可以消除手动维护依赖列表的负担。此外,如果你需要侦听一个嵌套数据结构中的几个属性,watchEffect() 可能会比深度侦听器更有效,因为它将只跟踪回调中被使用到的属性,而不是递归地跟踪所有的属性。

watch vs. watchEffect

watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式:

  • watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外,仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖,因此,我们能更加精确地控制回调函数的触发时机。

  • watchEffect,则会在副作用发生期间追踪依赖。它会在同步执行过程中,自动追踪所有能访问到的响应式属性。这更方便,而且代码往往更简洁,但有时其响应性依赖关系会不那么明确。

回调的触发时机

当你更改了响应式状态,它可能会同时触发 Vue 组件更新和侦听器回调。

类似于组件更新,用户创建的侦听器回调函数也会被批量处理以避免重复调用。例如,如果我们同步将一千个项目推入被侦听的数组中,我们可能不希望侦听器触发一千次。

默认情况下,侦听器回调会在父组件更新 (如有) 之后、所属组件的 DOM 更新之前被调用。这意味着如果你尝试在侦听器回调中访问所属组件的 DOM,那么 DOM 将处于更新前的状态。

Post Watchers​

如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM,你需要指明 flush: 'post' 选项:

watch(source, callback, {flush: 'post'
})watchEffect(callback, {flush: 'post'
})

 后置刷新的 watchEffect() 有个更方便的别名 watchPostEffect()

import { watchPostEffect } from 'vue'watchPostEffect(() => {/* 在 Vue 更新后执行 */
})

同步侦听器​

你还可以创建一个同步触发的侦听器,它会在 Vue 进行任何更新之前触发:

js

watch(source, callback, {flush: 'sync'
})watchEffect(callback, {flush: 'sync'
})

同步触发的 watchEffect() 有个更方便的别名 watchSyncEffect()

import { watchSyncEffect } from 'vue'watchSyncEffect(() => {/* 在响应式数据变化时同步执行 */
})

 

停止侦听器​

在 setup() 或 <script setup> 中用同步语句创建的侦听器,会自动绑定到宿主组件实例上,并且会在宿主组件卸载时自动停止。因此,在大多数情况下,你无需关心怎么停止一个侦听器。

一个关键点是,侦听器必须用同步语句创建:如果用异步回调创建一个侦听器,那么它不会绑定到当前组件上,你必须手动停止它,以防内存泄漏。如下方这个例子:

<script setup>
import { watchEffect } from 'vue'// 它会自动停止
watchEffect(() => {})// ...这个则不会!
setTimeout(() => {watchEffect(() => {})
}, 100)
</script>

 要手动停止一个侦听器,请调用 watch 或 watchEffect 返回的函数:

const unwatch = watchEffect(() => {})// ...当该侦听器不再需要时
unwatch()

注意,需要异步创建侦听器的情况很少,请尽可能选择同步创建。如果需要等待一些异步数据,你可以使用条件式的侦听逻辑:

// 需要异步请求得到的数据
const data = ref(null)watchEffect(() => {if (data.value) {// 数据加载后执行某些操作...}
})

 

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

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

相关文章

【Node.js】图片验证码识别

现在越来越多的网站采取图片验证码&#xff0c;防止机器恶意向服务端发送请求。但是常规的图片验证码也不是非常安全了。有非常多第三方库可以对图片上的数字文字等进行识别。 代码实现 首先安装依赖&#xff1a; npm install node-native-ocrnpm&#xff1a;(node-native-oc…

经验分享:开源知识库才是企业低成本搭建的最佳选择!

身为企业所有者的你&#xff0c;是否为建设企业的知识库而头疼&#xff1f;想要一个功能全面而又简单易用的知识库&#xff0c;但又担心成本过高&#xff1f;那我今天要分享的内容&#xff0c;可能会给你带来一些启示。那便是&#xff1a;开源知识库便是你企业低成本搭建的最佳…

mysql null和空值的区别

null 也就是在字段中存储null值&#xff0c;空值也就是字段中存储空字符(‘’) 占用空间的区别 执行sql&#xff1a;mysql> select length(NULL), length(‘’), length(‘1’); 空值’是不占用空间的&#xff0c;而null的长度是null&#xff0c;其实是占用空间的。mysql…

单元测试(UT)用例简介

单元测试&#xff08;Unit Testing, UT&#xff09;用例是一系列预先设计好的、针对软件最小可测试单元的测试场景。每一个单元测试用例都是为了验证一个独立代码单元&#xff08;如函数、方法、类&#xff09;的行为是否符合预期。这些用例通常包含以下几个关键组成部分&#…

Tron波场区块链 | 使用Java将Tron钱包助记词转私钥 全网独门一份

如何使用Java将Tron钱包助记词转换为私钥? 本来想着这个问题挺简单&#xff0c;可是查了半天&#xff0c;不是&#xff0c;不止半天查了好长时间&#xff0c;看了半天官网文档&#xff0c;全网Java就没有实现的。 咋办。。。咋办呢&#xff1f; 好巧&#xff0c;官网我看到…

.Net Web窗口页属性

<%Page %> Page 指令定义 Web 窗体使用的属性&#xff0c;这些属性将被 Web 窗体页分析器和编译器使用。只能包含在 .aspx 文件中。我们每新建一个 Web 页面时&#xff0c;系统会自动为该 Web 页面头部创建一个 Page 指令&#xff0c;来指明页面最基本的属性。 Langu…

ARM-按键中断实验

代码 #include "stm32mp1xx_gic.h" #include "stm32mp1xx_exti.h" extern void printf(const char *fmt, ...); unsigned int i 0; void do_irq(void) {//获取要处理的中断的中断号unsigned int irqnoGICC->IAR&0x3ff;switch (irqno){case 99:pr…

C++奇迹之旅(三):缺省参数与函数重载

文章目录 &#x1f4dd;缺省参数分类&#x1f320; 缺省参数概念&#x1f309;缺省参数分类 &#x1f320;全缺省参数&#x1f309;半缺省参数 &#x1f320; 函数重载&#x1f309; 函数重载概念&#x1f320;参数类型不同&#x1f320;参数个数不同&#x1f320;参数类型顺序…

SpringWebFlux初步认识

反应式编程的认识 基础认识 命令式编程&#xff1a;后一行代码需要等待前一行代码执行完毕&#xff0c;也就是后面的执行任务步骤依赖于前面的执行任务。 反应式编程&#xff1a; 定义了一组如何处理数据的任务&#xff0c;这些任务是可以并行进行的&#xff0c;可以在处理数…

CQI-17:2021 V2 英文 、中文版。特殊过程:电子组装制造-锡焊系统评审标准

锡焊作为一个特殊的工艺过程&#xff0c;由于其材料特性的差异性、工艺参数的复杂性和过程控制的不确定性&#xff0c;长期以来一直视为汽车零部件制造业的薄弱环节&#xff0c;并将很大程度上直接导致整车产品质量的下降和召回风险的上升。 美国汽车工业行动集团AIAG的特别工…

C++蓝桥考级一级到十八级的考点内容整理

以下是C蓝桥考级一级到十八级的考点内容整理&#xff1a; C一级考点内容 C程序基本结构 初步了解C编程了解C程序基本结构&#xff1a;头文件、命名空间、主函数、基本输入输出 cin、cout C二级考点内容 数据类型与变量 掌握编程中数学表达式的计算方式基础数据类型、变量的…

2024年2月游戏手柄线上电商(京东天猫淘宝)综合热销排行榜

鲸参谋监测的线上电商&#xff08;京东天猫淘宝&#xff09;游戏手柄品牌销售数据已出炉&#xff01;2月游戏手柄销售数据呈现出强劲的增长势头。 根据鲸参谋数据显示&#xff0c;今年2月游戏手柄月销售量累计约43万件&#xff0c;同比去年上涨了78%&#xff1b;销售额累计达1…

武汉星起航:跨境电商获各大企业鼎力支持,共筑繁荣生态

随着全球化和数字化的深入发展&#xff0c;跨境电商行业逐渐成为连接国内外市场的重要桥梁。在这一进程中&#xff0c;各大企业纷纷加大对跨境电商行业的支持力度&#xff0c;通过投资、合作与创新&#xff0c;共同推动行业的繁荣与发展。武汉星起航将探讨各大企业对跨境电商行…

Linux安装python3

Linux安装python3 本文章中使用的安装包等相关文件&#xff1a; 链接: https://pan.baidu.com/s/1C4PTB6IqXtHM6XSOEMkefg 提取码: wyeq 1.编译环境安装 yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gcc mak…

Linux 基于chrony进行时钟同步方案验证

Linux 基于chrony进行时钟同步方案验证 1. 背景介绍2. 验证过程2.1 追踪配置2.2 追平记录2.2 追平时间换算 3. 疑问和思考3.1 如何统计追踪1s需要花费多长时间&#xff1f; 4. 参考文档 chrony是一个Linux系统中用于时钟同步的工具。它使用NTP&#xff08;网络时间协议&#xf…

在 Linux 中通过 SSH 执行远程命令时,无法自动加载环境变量(已解决)

问题场景 目前我的环境变量都存储在 /etc/profile 文件中&#xff0c;当我通过远程 SSH 执行一些命令时&#xff0c;提示命令找不到&#xff0c;如下所示&#xff1a; 问题出现原因 这里找到了一张出自尚硅谷的图片&#xff0c;很好的解释了该问题&#xff1a; 这是由于 Linu…

【BlossomRPC】一个完整的含源码和文档的RPC项目

文章目录 手把手教你写一个RPC协议如何自定义一个RPC协议&#xff1f;编解码器的实现服务暴露与发现服务端与客户端服务解析注解的实现服务端与客户端请求Handler接入注册中心 RPC项目源码 配置中心项目源码 ⭐网关项目源码⭐ 手把手教你写一个RPC协议 如何自定义一个RPC协议…

Java解决数位递增的数

Java解决数位递增的数 01 题目 一个正整数如果任何一个数位不大于右边相邻的数位&#xff0c;则称为 个数位递增的数。 例如 1135 是一个数位递增的数&#xff0c;而 1024 不是一个数位递增的数。 给定正整数n&#xff0c;请问在整数 1 至 n 中有多少个数位递增的数? 输入描…

Java数据结构-链表OJ题

目录 1. 移除链表元素2. 反转链表3. 返回中间结点4. 返回倒数第k个结点5. 合并两个有序链表6. 分割链表7. 回文链表8. 找相交链表的公共结点9. 判断链表是否有环10. 返回链表环的入口 老铁们好&#xff0c;学习完链表这个数据结构之后&#xff0c;怎么能少了OJ题呢&#xff1f;…

HTLM 之 vscode 插件推荐

文章目录 vscode 插件live Serverprettiersetting 保存这个文档的更改Material Theme / Material Theme icon vscode 插件 live Server prettier setting 搜索 format default 保存这个文档的更改 cmds // mac ctrls // win Material Theme / Material Theme icon 来更换…