vue3 对于watch的再次理解 给响应式变量赋相同值时watch不会被触发。

问题
当我给响应式变量赋相同值时watch不会被触发。

之前一直对于watch的理解是会被频繁触发,值变化就会被执行,反之computed会缓存相同值。
看官方文档也没有相关说明,加上赋相同值的场景占少数

结论
在 Vue 3 中,watch 函数默认情况下只在被观察的响应式值发生更改时触发。
如果你为一个响应式变量赋予了相同的值(即赋值前后没有变化),那么watch不会触发。
例如,假设你有以下代码:

import { ref, watch } from 'vue';export default {setup() {const myVar = ref(false);watch(myVar, (newValue, oldValue) => {console.log('myVar changed from', oldValue, 'to', newValue);});// 设置一些延迟然后为myVar赋相同的值setTimeout(() => {myVar.value = false;}, 2000);return {};},
};

上面的代码中,尽管你在2秒后为myVar重新赋值了false,但watch中的回调函数并不会执行,因为其值并没有真正的变化。
如果需要即使赋予相同的值时也触发watch,你可以使用watch的deep和flush选项,但这在上述情况下并不适用。
如果你真的需要在每次赋值时都触发某个函数,不论值是否发生了变化,那你可能需要使用其他的方法,比如自己包装一个函数来进行赋值和触发你需要的操作。

相关疑问
那之前的机制就是不触发还是vue3中被更改了?
Vue 的观察者系统的核心是响应性。Vue 的设计目标之一是避免不必要的计算和渲染,所以当值没有真正变化时,触发 watcher 没有意义,并可能导致不必要的计算或其他效果。

在 Vue 2.x 中,当一个 reactive property 被重新赋予相同的值时,watcher 也是不会被触发的。Vue 3 在这方面的行为并没有改变。

如果你确实需要触发 watcher,即使赋予了相同的值,可以考虑一些变通的方法,例如为该 property 添加一个时间戳或其他的改变值,确保每次赋值都与之前的值不同。但这种方法并不推荐,因为它破坏了数据的语义。

总之,Vue 的这种设计选择是为了性能和避免不必要的渲染。如果在实际应用中遇到问题,建议从业务逻辑的角度考虑如何优化,而不是试图改变 Vue 的默认行为。

这种情况watch和computed有什么区别?
watch 和 computed 在 Vue 中都是观察响应性数据变化的工具,但它们有一些关键的区别:

目的:

computed: 用于声明式地描述一个值如何依赖其他值。它的目标是基于其他响应性属性计算一个值。
watch: 用于执行任何副作用(如调用 API、控制 I/O 或执行其他不纯的操作)当依赖的值发生变化时。
返回值:

computed: 必须返回一个值,并且这个值会被缓存,直到依赖的响应性属性发生变化时才会重新计算。
watch: 没有返回值,它的目的是为了执行一些操作。
响应性:

computed: 自动追踪其内部所依赖的响应性属性。如果这些属性中的任何一个发生变化,计算属性会自动重新计算。
watch: 显式地指定要观察的属性。当这些属性发生变化时,它会执行提供的回调函数。
优化:

computed: 当其依赖的属性未发生变化时,返回值会被缓存,避免不必要的重新计算。
watch: 不会缓存结果,每次属性变化都会执行回调。
使用场景:

computed: 当你需要基于其他属性来派生新的数据时,例如:合计一个列表的总价。
watch: 当你需要在某个属性发生变化时执行异步操作或更复杂的操作,例如:根据用户的输入来查询数据。
在大多数情况下,如果你只是想基于其他属性计算一个新的值,使用 computed 会更合适。但如果你需要在数据变化时执行更复杂的操作或有副作用,那么 watch 会是更好的选择。

也就是computed如果属性变化但是计算结果相同就不会被触发,反之watch会被触发吗?
不完全是

computed:

如果其依赖的属性变化了,但计算结果仍然与上一次相同,那么依赖于这个计算属性的其他响应性系统(例如模板或其他计算属性)不会重新计算或渲染。
总结:计算属性值相同不会触发重新渲染。
watch:

如果你正在观察的响应性属性的值改变了,无论新值是否与旧值相同,watch 的回调都会被触发。但如果属性被设置为与其当前值相同,那么 watch 的回调不会被触发。
总结:属性值相同不会触发 watch 回调。
所以 computed 如果属性变化但是计算结果相同就不会被触发是正确的,但对于 watch 并不完全正确。watch 仅在观察的属性值真正改变时触发,如果重新设置的值与当前值相同,则不会触发。

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

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

相关文章

钉钉登录前端处理

可参考官网&#xff1a;扫码登录第三方网站 - 钉钉开放平台 方式一&#xff1a;网站将钉钉登录二维码内嵌到自己页面中 <script src"https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script> 在需要使用钉钉登录的地方实例以下JS对象 …

【Simulink系列】——控制系统仿真基础

声明&#xff1a;本系列博客参考有关专业书籍&#xff0c;截图均为自己实操&#xff0c;仅供交流学习&#xff01; 一、控制系统基本概念 这里就不再介绍类似于开环系统、闭环系统等基本概念了&#xff01; 1、数学模型 控制系统的数学模型是指动态数学模型&#xff0c;大致…

车辆伤害VR安全教育培训复用性强

VR工地伤害虚拟体验是一种新兴的培训方式&#xff0c;它利用虚拟现实技术为参与者提供身临其境的体验。与传统的培训方式相比&#xff0c;VR工地伤害虚拟体验具有许多优势。 首先&#xff0c;VR工地伤害虚拟体验能够模拟真实的工作环境和事故场景&#xff0c;让参与者在安全的环…

基于单片机的晾衣架控制系统设计

目 录 摘 要 I Abstract II 引 言 1 1 系统方案设计 3 1.1 系统方案论证 3 1.2 系统工作原理 4 2 硬件设计 5 2.1 单片机 5 2.2 按键设计 7 2.3 光线检测模块 8 2.4 雨滴检测模块 9 2.5 电压比较器 10 2.6 微动步进电动机 11 2.7 硬件电路原理图 12 3 系统主要软件设计 14 3.1…

Python常用语法汇总(一):字符串、列表、字典操作

1. 字符串处理 print(message.title()) #首字母大写print(message.uper()) #全部大写print(message.lower()) #全部小写full_name "lin" "hai" #合并字符串print("Hello, " full_name.title() "!")print("John Q. %s10s&qu…

买不到的数目c++

题目 输入样例&#xff1a; 4 7输出样例&#xff1a; 17 思路 一个字&#xff0c;猜。 一开始不知道怎么做的时候&#xff0c;想要暴力枚举对于特定的包装n, m&#xff0c;最大不能买到的数量maxValue是多少&#xff0c;然后观察性质做优化。那么怎么确定枚举结果是否正确呢…

程序员的职业路径:如何选择适合自己的职业方向?

在当今数字化时代&#xff0c;作为一名程序员&#xff0c;选择正确的职业赛道至关重要。随着技术的迅速发展和市场的竞争加剧&#xff0c;程序员们需要认真思考自己的职业方向&#xff0c;并做出明智的决策。 自我评估与兴趣探索 首先&#xff0c;程序员们应该对自己进行深入…

主题乐园如何让新客变熟客,让游客变“留客”?

群硕跨越时间结识了一位爱讲故事的父亲&#xff0c;他汇集了一群幻想工程师&#xff0c;打算以故事为基础&#xff0c;建造一个梦幻的主题乐园。 这个乐园后来成为全球游客最多、收入最高的乐园之一&#xff0c;不仅在2023财年创下了近90亿&#xff08;美元&#xff09;的营收…

[渗透教程]-022-内网穿透的高性能的反向代理应用

frp 简介 frp 是一个专注于内网穿透的高性能的反向代理应用,支持 TCP、UDP、HTTP、HTTPS 等多种协议。可以将内网服务以安全、便捷的方式通过具有公网 IP 节点的中转暴露到公网。 项目地址 https://github.com/fatedier/frp安装 linux 配置方式见如下链接🔗 frp安装配置…

Kubernetes 二进制部署 《easzlab / kubeasz项目部署》- 03-安装容器运行时

Kubernetes 二进制部署 《easzlab / kubeasz项目部署》 03-安装容器运行时 03-安装容器运行时 项目根据k8s版本提供不同的默认容器运行时&#xff1a; k8s 版本 < 1.24 时&#xff0c;支持docker containerd 可选 k8s 版本 > 1.24 时&#xff0c;仅支持 containerd[roo…

亚马逊认证考试系列 - 知识点 - EMR简介

一、AWS EMR 简介 AWS EMR 是 Amazon Web Services 的托管 Hadoop 框架&#xff0c;它简化了在云中处理大规模数据的过程。EMR 支持基于 Hadoop、Spark、Presto 和其他大数据技术的分布式计算框架。主要特性和优势弹性伸缩&#xff1a;根据工作负载的需要自动扩展或收缩计算集…

vue2实现拖拽排序效果

1、首先下载 vuedraggable 插件 npm i -S vuedraggable2、使用方法 <template><div><div style"display: flex; justify-content: center; align-items: center"><div style"width: 120px; height: 60px; line-height: 60px; text-align…

独家揭秘:AI大模型在实践中的应用!

在当今社会&#xff0c;人工智能技术被广泛应用于各行各业。其中&#xff0c;AI大模型作为人工智能领域的热门话题&#xff0c;正逐渐成为现实生活中的重要应用。AI大模型是一种基于深度学习和神经网络技术的计算机模型&#xff0c;能够通过大规模数据的训练和学习&#xff0c;…

利用小红书笔记利用小红书笔记API:开发者的内容创新利器

小红书是一个备受欢迎的社交平台&#xff0c;它为用户提供了分享购物心得、旅行体验、美妆技巧等内容的平台。对于开发者来说&#xff0c;小红书笔记API&#xff08;如果开放的话&#xff09;可以是一个强大的工具&#xff0c;用于实现内容创新、数据分析以及用户互动等多种功能…

dpdk-vdpa中QEMU热迁移脏页log内存的分配和传递流程

migration_thread qemu_savevm_state_setup ram_save_setup ram_init_all ram_init_bitmaps memory_global_dirty_log_start //全局标脏 MEMORY_LISTENER_CALL_GLOBAL(log_global_start, Forward); .log_global_start = vhost_log_global_start, vhost_migration_logvhost_dev_…

SpringMVC-异步调用,拦截器与异常处理

1.异步调用 1.发送异步请求 <a href"javascript:void(0);" id"testAjax">访问controller</a> <script type"text/javascript" src"js/jquery-3.7.1.js"></script> <script type"text/javascript&qu…

linux系统elk集群组件filebeat部署

Filebeat 部署 Filebeat 部署下载解压修改配置启动 Filebeat 部署 为什么用 Filebeat &#xff0c;而不用原来的 Logstash 呢&#xff1f; 原因很简单&#xff0c;资源消耗比较大。 Filebeat 需要部署在每台应用服务器上&#xff0c;可以通过 Salt 来推送并安装配置。 下载 …

C语言学习--练习2

目录 1.排序数组 2.多数元素 3.存在重复元素 4.最大间距 5.按奇偶排序数组 6.最小时间差 1.排序数组 /*** Note: The returned array must be malloced, assume caller calls free().*/ int cmp(const void*a,const void*b){return *(int*)a-*(int*)b; } int* sortArray(i…

C语言抽象代码(其五)

水博客 今天突发奇想&#xff0c;可不可以用中文写代码。 然后我发现可以用#define完成。 我们看代码 非常好理解就是用前面代替后面。比如&#xff1a; 主函数 代替 int main 非常简单

二叉搜索树题目:二叉搜索树迭代器

文章目录 题目标题和出处难度题目描述要求示例数据范围进阶 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 解法三思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;二叉搜索树迭代器 出处&#xff1a;173. 二叉搜索树迭代器 难度 4 级 题目…