Vue中 watch 与 watchEffect 的区别

Watch

  • 默认是懒侦听,即仅在侦听源发生变化时才执行回调函数。
  • 只追踪明确定义的数据源,不会追踪在回调中访问到的东西
  • 可以访问侦听数据的新值和旧值。
  • 总共接收三个参数,侦听数据源、回调函数和配置选项。
const x = ref(1)
const y = ref(1)
const doubleX = computed(() => x.value * 2)
const obj = reactive({ count: 0 })// 单个 ref
watch(x, (newValue) => {console.log(`x is ${newValue}`)
})// 计算属性
watch(doubleX, (newValue) => {console.log(`doubleX is ${newValue}`)
})// getter 函数
watch(() => x.value + y.value,(sum) => {console.log(`sum of x + y is: ${sum}`)}
)// 响应式对象
watch(obj, (newValue, oldValue) => {// 在嵌套的属性变更时触发// 注意:`newValue` 此处和 `oldValue` 是相等的// 因为它们是同一个对象!
})// 以上类型的值组成的数组
watch([x, () => y.value], ([newX, newY]) => {console.log(`x is ${newX} and y is ${newY}`)
})

WatchEffect

  • 初始化执行一次
  • 在副作用发生期间追踪依赖,自动分析出侦听数据源
  • 无法访问侦听数据的新值和旧值。
  • 接受两个参数,回调函数、配置对象。
const url = ref('https://...')
const data = ref(null)// 自动分析出侦听数据源
watchEffect(async () => {const response = await fetch(url.value)data.value = await response.json()
})

想要深入学习的同学,可以查阅这篇文章—《彻底搞懂 Watch、WatchEffect》,该博主讲的很详细!!!

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

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

相关文章

硅纪元视角 | 摩根大通拥抱AI:LLM Suite开启金融行业新篇章!

在数字化浪潮的推动下,人工智能(AI)正成为塑造未来的关键力量。硅纪元视角栏目紧跟AI科技的最新发展,捕捉行业动态;提供深入的新闻解读,助您洞悉技术背后的逻辑;汇聚行业专家的见解,…

华为OD机试 - 计算三叉搜索树的高度 (python 2024年C卷D卷)

华为OD机试(C卷D卷)2024真题目录(Java & c & python) 题目描述 定义构造三叉搜索树规则如下: 每个节点都存有一个数,当插入一个新的数时,从根节点向下寻找,直到找到一个合适的空节点插入。查找的…

【字母异位词分组】python刷题记录

R2-字符串篇 class Solution:def groupAnagrams(self, strs: List[str]) -> List[List[str]]:#哈希表分组#把每种字母出现次数相同的字符串分到同一组#sort一下好像能分dictdefaultdict(list)for s in strs:asorted(s)#sorted(s)相同的字符串分到同一组dict[.join(a)].appen…

Java 基础 and 进阶面试知识点(超详细)

一个 Java 文件中是否可以存在多个类(修饰类除外)? 一个 Java 文件中是可以存在多个类的,但是一个 Java 文件中只能存在一个 public 所修饰的类,而且这个 Java 文件的文件名还必须和 public 所修饰类的类名保持一致&a…

如何应对零日威胁:漏洞扫描

零日威胁正变得比以往任何时候都更加危险。5月底至6月初,恶意行为者通过零日攻击接管了众多名人和品牌的TikTok账户。用户声称在打开一条私信后便丧失了账户的控制权。而用于攻击的恶意软件能够在用户不下载或安装任何程序的情况下感染设备。 目前尚不清楚此次事件的…

linux系统巡检及shell脚本

目录 步骤1 系统巡检基本命令 CPU 内存 磁盘 进程 网络、流量 步骤2 shell脚本编写 awk awk常用内置变量 awk正则 实例一 实例二 实例三 实例四 实例五 sed 选项与参数 例一 例二 例三 例四 例五 例六 例七 grep 主要参数 常用用法 例一 例二 例三…

vue 开发环境配置

1. nvm 安装 在 github上下载 最新的 nvm 包 https://github.com/coreybutler/nvm-windows/releases或者在 csdn 上下载(从github上迁移,方便下载)https://download.csdn.net/download/u011171506/89585197 下载后不用修改任何配置&#x…

2024年第三届钉钉杯大学生大数据挑战赛初赛题目A题

初赛A:烟草营销案例数据分析 一、问题背景: 烟草是我国重要的国家税收和财政收入来源。在现有市场中占有极为稳定的根基。据统计,近年来我国卷烟销售收入逐年增长。现在国家对烟草实行专卖制度, 对烟草专卖品的生产、销售、进出口依法实行专卖…

2024年【广东省安全员B证第四批(项目负责人)】考试报名及广东省安全员B证第四批(项目负责人)模拟考试

题库来源:安全生产模拟考试一点通公众号小程序 广东省安全员B证第四批(项目负责人)考试报名根据新广东省安全员B证第四批(项目负责人)考试大纲要求,安全生产模拟考试一点通将广东省安全员B证第四批&#x…

系统架构师(每日一练7)

每日一练 1.关于网络延迟正确的是()。答案与解析 A.在对等网络中,网络的延迟大小与网络中的终端数量无关 B.使用路由器进行数据转发所带来的延迟小于交换机, C.使用internet服务器可最大程度地减小网络延迟 D.服务器延迟的主要影响因素是队列延迟和磁盘10延迟 2.以…

【ESP32 IDF SPI硬件驱动W25Q64】

目录 SPISPI介绍idf配置初始化配置通信 驱动代码 SPI SPI介绍 详细SPI介绍内容参考我之前写的内容【ESP32 IDF 软件模拟SPI驱动 W25Q64存储与读取数组】 idf配置 初始化配置 spi_bus_initialize() 参数1 :spi几,例如spi2,spi3 参数2:…

GitHub Actions是什么

目录 GitHub Actions是什么 GitHub Actions的使用方法 示例 注意事项 GitHub Actions配置文件中-工作流的 :Workflow 一、自动化任务执行 二、规范团队协作 三、灵活配置和定制 四、提高开发效率 五、集成GitHub生态 六、可复用性和共享性 仓库中的“Actions”部分…

从零开始学习大模型

随着技术的进步,大模型如OpenAI的GPT-4和Sora、Google的BERT和Gemini等已经展现出了惊人的能力-从理解和生成自然语言到创造逼真的图像及视频。所以掌握大模型的知识和技能变得越来越重要。 下面是学习大模型的一些建议,供大家参考。 必备基础知识 数…

mac 使用ssh 密钥登录linux 服务器

本地操作 1. 生成SSH密钥对 # your_emailexample.co 自行定义即可 ssh-keygen -t rsa -b 4096 -C "your_emailexample.com"这会提示你输入文件保存位置和密码(密码可以留空): Generating public/private rsa key pair. Enter file in which to save the…

Java工具类中Add a private constructor to hide the implicit public one.

问题 Java工具类中出现如下警告: Add a private constructor to hide the implicit public one. 原因 主要是Java工具类中没有私有无参构造器。 解决 这使用Lombok的工具类注解解决即可: UtilityClass public class FileUtils {// public static me…

Postman入门(三):创建post请求及请求参数

创建post请求Raw data: 请求方式:Post 请求体:raw,选择json格式 参数{}内数据,点击send即可发送请求 创建post请求Form-data: 请求方式:Post 请求体:form-data, 参数:在form-data内&#…

Lombok的认识

Lombok的作用 Lombok是一个Java库,它可以通过简单的注解形式来帮助开发人员简化Java代码的编写,特别是减少模板代码的书写。具体来说,Lombok的主要作用包括: 减少模板代码:Lombok可以通过注解自动生成getter、setter、…

Javascript 沙漏图案(Hour-glass Pattern)

给定正整数 n,以沙漏形式打印数字模式。示例: 输入:rows_no 7 输出: 1 2 3 4 5 6 7 2 3 4 5 6 7 3 4 5 6 7 4 5 6 7 5 6 7 6 7 7 6 7 5 6 7 4 5 6 7 3 4 5 6 7 2 3 4 5 6 7 1 2 3 4 5 6…

Windows系统安全加固方案:快速上手系统加固指南(上)

无论是个人用户、小型企业还是大型机构,都需要采取措施保护其计算机系统免受各种威胁、系统加固常见的应用场景有个人用户、 AWD 比赛、公共机构以及企业环境等等 文档目录 一、Windows常用命令二、Windows常见端口三、账户安全3.1 默认账户安全3.2 按照用户分配账户…

大数据-44 Redis 慢查询日志 监视器 慢查询测试学习

点一下关注吧!!!非常感谢!!持续更新!!! 目前已经更新到了: Hadoop(已更完)HDFS(已更完)MapReduce(已更完&am…