#Vue3篇:watch、watchEffect、watchPostEffect、watchSyncEffect的区别

news/2024/3/4 8:32:16

Vue 3 中的 watch、watchEffect、watchPostEffect 和 watchSyncEffect 都是用于监视响应式数据变化的 API,但它们之间有一些区别,下面详细介绍它们的使用方法和不同之处。

watch

watch 是 Vue 2 中的 API,Vue 3 中也保留了这个 API。它是一个侦听器,可以用于侦听单个变量或对象的属性,可以传入一个回调函数,在值变化时执行该函数。

watch(() => count.value, (newValue, oldValue) => {console.log(`count 值从 ${oldValue} 变为 ${newValue}`)
})

上面的代码使用了 watch API 监听了 count 变量的变化,当 count 的值发生变化时,控制台就会输出新旧值。

watchEffect

watchEffect 是 Vue 3 中新增的 API,它接受一个函数作为参数,会自动执行这个函数,并在函数执行过程中收集函数所依赖的响应式数据。如果在函数执行过程中访问了某个响应式数据,那么当这个响应式数据发生变化时,watchEffect 会自动重新执行该函数。watchEffect 的回调函数没有传递新值和旧值的参数。

const count = ref(0)
watchEffect(() => {console.log(`count 值为 ${count.value}`)
})

上面的代码使用了 watchEffect API 监听了 count 变量的变化,并在回调函数中打印出 count 的值。

watchPostEffect

watchPostEffect 也是 Vue 3 中新增的 API,它接受一个函数作为参数,和 watchEffect 类似,会自动执行这个函数,并在函数执行过程中收集函数所依赖的响应式数据。但是和 watchEffect 不同的是,watchPostEffect 会在函数执行结束后再次执行一次,这次执行没有任何的依赖追踪。

const count = ref(0)
watchPostEffect(() => {console.log(`count 值为 ${count.value}`)
})

上面的代码使用了 watchPostEffect API 监听了 count 变量的变化,并在回调函数中打印出 count 的值。和 watchEffect 不同的是,watchPostEffect 会在函数执行结束后再次执行一次。

watchSyncEffect

watchSyncEffect 也是 Vue 3 中新增的 API,它接受一个函数作为参数,和 watchEffect 类似,会自动执行这个函数,并在函数执行过程中收集函数所依赖的响应式数据。但是和 watchEffect 不同的是,watchSyncEffect 会立即执行一次回调函数,而不是等到下一个事件循环才执行。

<template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
</template><script setup lang="ts">
import { ref, watchSyncEffect } from "vue"const count = ref(0)const increment = () => {count.value++
}watchSyncEffect(() => {console.log(`Count is now ${count.value}`)
})
</script></script>

http://www.ppmy.cn/news/50743.html

相关文章

重新学习Java线程原语

Synchronized曾经是一个革命性的技术&#xff0c;在当前仍然有重要的用途。但是&#xff0c;现在是时候转向更新的Java线程原语&#xff0c;同时重新考虑我们的核心逻辑。 自从Java第一个测试版以来&#xff0c;我就一直在使用它。从那时起&#xff0c;线程就是我最喜欢的特性之…

力扣刷题之路-01

作为一个修仙者&#xff0c;刚刚踏入练气期一层&#xff0c;无论从思维逻辑&#xff0c;还是技术层面&#xff0c;自己发现自己的能力不足。临渊羡鱼&#xff0c;不如退而结网&#xff0c;此后开始每天都继续学习&#xff0c;争取早日筑基 ----2023.4.22 说实话&#xff0c;第一…

【技术选型】Java 定时任务

文章目录 背景一、基础1.1 Cron表达式1.2 定时任务的三大组成部分 二、Java做定时任务的技术方案比较2.1、JDK seelp实现定时任务2.2、JDK Timer & TimerTask 实现定时任务2.3、JDK ScheduledExecutorService2.4、Quartz框架2.5、Spring Task 中的 schedule2.6、Elastic-Jo…

程序员员为什么总是要加班呢?不加班会被开除吗?

最近和圈子外的一个好朋友去聊天 他问我一个很奇怪的问题 就是你们程序员为什么会经常加班 并且都是11点12点才回家 为什么会这样 是因为有很多事情做不完吗其实 我半开玩笑的告诉他 其实事情没那么多 那为什么还要加班呢 首先加班的原因有很多 但是概述起来 就有如下几点 第一…

无人机遥感影像应用

目录 一、无人机遥感技术 二、无人机遥感影像数据生产 三、无人机遥感影像应用 一、无人机遥感技术 1.无人机遥感系统组成 1.1无人机遥感系统组成—无人机平台 1.2无人机遥感系统组成—传感器 2.无人机遥感技术的特点 高时效性&#xff1a;准确并快速获取地表数据 高分辨率…

正则表达式 - 简单模式匹配

目录 一、测试数据 二、简单模式匹配 1. 匹配字面值 2. 匹配数字和非数字字符 3. 匹配单词与非单词字符 4. 匹配空白字符 5. 匹配任意字符 6. 匹配单词边界 7. 匹配零个或多个字符 8. 单行模式与多行模式 一、测试数据 这里所用文本是《学习正则表达式》这本书带的&a…

2023年3月 青少年软件编程(C语言) 等级考试试卷(五级)

1. 拼点游戏 C和S两位同学一起玩拼点游戏。有一堆白色卡牌和一堆蓝色卡牌&#xff0c;每张卡牌上写了一个整数点数。C随机抽取n张白色卡牌&#xff0c;S随机抽取n张蓝色卡牌&#xff0c;他们进行n回合拼点&#xff0c;每次两人各出一张卡牌&#xff0c;点数大者获得三颗巧克力&…

缓存一致问题、幂等、jvm调优

缓存笔记 来自 程序员囧辉 黑马博学谷 幂等问题 1 缓存一致问题 1.1.同步删除 核心流程&#xff1a; 更新数据库数据删除缓存数据 问题&#xff1a; . 并发场景下存在脏数据 (并发有脏数据问题). 难以收拢所有更新数据库入口 (可能通过命令行、工具等删除db&#xff0c;…

MySQL:事务、索引、用户管理、备份、数据库设计(三大范式)

文章目录 Day 03&#xff1a;一、事务1. 原则2. 测试实现 二、索引1. 分类2. 创建索引3. 分析 sql 执行的状况4. 测试索引5. 索引原则 三、数据库用户管理四、备份五、规范数据库设计1. 三大范式 注意&#xff1a; Day 03&#xff1a; 一、事务 事务(transaction)&#xff1a…

Web自动化测试简介及web自动化测试实战交教程

一、认识web自动化测试 1.什么是自动化测试&#xff1f; 自动化测试的概念: 软件自动化测试就是通过测试工具或者其他手段&#xff0c;按照测试人员的预定计划对软件产品进行自动化测试&#xff0c;他是软件测试的一个重要组成部分&#xff0c;能够完成许多手工测试无法完成或…

Go | 一分钟掌握Go | 4 - 数组

作者&#xff1a;Mars酱 声明&#xff1a;本文章由Mars酱编写&#xff0c;部分内容来源于网络&#xff0c;如有疑问请联系本人。 转载&#xff1a;欢迎转载&#xff0c;转载前先请联系我&#xff01; 说明 特意省去了很多基础章节&#xff0c;比如常量、变量、条件语句、判断语…

Linux:文件查看:《cat》《more》《less》《head》《tail》《wc》《grep》使用方法

同样是查看为什么要有这么多查看方法&#xff1f;&#xff1f;&#xff1f; 因为他们的用法和扩功能肯定不一样&#xff0c;选择与你需要匹配的一条命令可以节省时间的同时更快速 cat 文件 可以直接查看文件内的内容 直接可以查看文件内的内容 要直接看更多的文件以空格隔开的…

【WCH】CH32F203基于内部RTC+I2C SSD1306 OLED时钟和温度显示

【WCH】CH32F203基于内部RTCI2C SSD1306 OLED时钟和温度显示 &#x1f4cc;相关篇《【WCH】CH32F203基于内部RTC时钟I2C SSD1306 OLED显示》&#x1f4fa;显示效果&#xff1a; ✨主要是在其基础 上增加温度显示&#xff0c;温度数据来源于DS18B20&#xff0c;更换了OLED驱动显…

【C语言】调试工具GDB简述

一、说明 GDB&#xff08;GNU Debugger&#xff09;是UNIX及UNIX-like下的强大调试工具&#xff0c;可以调试ada, c, c, asm, minimal, d, fortran, objective-c, go, java,pascal等语言。本文介绍GDB启动调试的方式。 二、Ubuntu上安装gdb。 在root用户权限下&#xff1a; roo…

IO多路复用——select函数

1.select函数原型和fd_set结构体说明 1.1 select函数原型 ​ 使用 select 这种 IO 多路转接方式需要调用一个同名函数 select&#xff0c;这个函数是跨平台的&#xff0c;Linux、Mac、Windows 都是支持的。程序员通过调用这个函数可以委托内核帮助我们检测若干个文件描述符的…

11、HOOK原理上

一、HOOK 1.1 HOOK简介 HOOK,中文译为“挂钩”或“钩子”.在iOS逆向中是指改变程序运行流程的一种技术.通过hook可以让别人的程序执行自己所写的代码. 在逆向中经常使用这种技术重点要了解其原理,这样能够对恶意代码进行有效的防护. 1.2 Hook的应用场景 描述一个HOOK实用技…

【Git 入门教程】第二节、Git基础使用

Git是一个分布式版本控制系统&#xff0c;它可以帮助开发者更好地管理和维护代码。在本文中&#xff0c;我们将介绍Git的最基本操作&#xff0c;如安装Git、初始化仓库、添加文件、提交代码、查看记录等。 一、Git安装 1.下载 要使用Git&#xff0c;首先需要在计算机上安装G…

kafka集群搭建

1.本次搭建涉及3台centos7主机&#xff0c;防火墙与selinux服务均关闭 2.主机参数如下表所示 nameIPportserviceA10.1.60.1122128、2888、3888、9092kafka、zookeeperB10.1.60.1142128、2888、3888、9092kafka、zookeeperC10.1.60.1152128、2888、3888、9092kafka、zookeeper…

怎么在Windows和Linux平台上安装MySQL

这篇文章主要介绍“怎么在Windows和Linux平台上安装mysql”&#xff0c;在日常操作中&#xff0c;相信很多人在怎么在Windows和Linux平台上安装MySQL问题上存在疑惑&#xff0c;小编查阅了各式资料&#xff0c;整理出简单好用的操作方法&#xff0c;希望对大家解答”怎么在Wind…

C++ Linux Web Server 面试基础篇-操作系统(三、进程通信)

⭐️我叫忆_恒心,一名喜欢书写博客的在读研究生👨‍🎓。 如果觉得本文能帮到您,麻烦点个赞👍呗! 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧,喜欢的小伙伴给个三连支持一下呗。👍⭐️❤️ Qt5.9专栏定期更新Qt的一些项目Demo 项目与…
最新文章