watch监听中重复触发如何解决?

在实际开发工程中通过获取后端数据监听判断数组中长度是否大于0从而调用其他的方法,但是如果data域中的数据出现变化的话,就会导致监听中的方法重复调用,导致一些不必要的bug,例如:

原理:

watch监听的数据在Vue实例初始化的过程中发生了变化。Vue在初始化时会遍历data选项中的数据,将其转化为响应式数据。如果在转化过程中,某些数据发生了变化,watch会在转化前后都触发一次。

问题:

我们发现每个数组只有一个图片地址,且显示在视图层中。

现在我们通过$set改变data域中list数组中每个对象的属性在试试:

运行结果:

我们发现data区域中list数组中属性发生改变后watch监听就会重复调用导致数组1和数组2重复插入新的数据(图片地址)从而导致数据重复。

解决方法:

在data区域中定义一个判断数据yes=true,在watch监听内if判断中加入yes===true的判断条件,watch方法内吧yes赋值为false。

运行结果:

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

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

相关文章

【Openstack Train安装】二、NTP安装

网络时间协议:Network Time Protocol(NTP)是用来使计算机时间同步化的一种协议,它可以使计算机对其服务器或时钟源(如石英钟,GPS等等)做同步化,它可以提供高精准度的时间校正(LAN上与…

分享72个简历竞聘PPT,总有一款适合您

分享72个简历竞聘PPT,总有一款适合您 72个简历竞聘PPT下载链接:https://pan.baidu.com/s/1EGqu8ufs8nh45NliNniWuQ?pwd8888 提取码:8888 Python采集代码下载链接:采集代码.zip - 蓝奏云 学习知识费力气,收集整…

【综述+自动流量分析A】New Directions in Automated Traffic Analysis

文章目录 论文简介摘要存在的问题论文贡献1. 整体架构2. nPrint3. nPrintML4. 任务 总结论文内容工具数据集可读的引用文献笔记参考文献 论文简介 原文题目:New Directions in Automated Traffic Analysis 中文题目:自动流量分析的新方向 发表会议&#…

唯品会年度特卖大会㊙内购清单㊙

唯品会年度特卖大会㊙内购清单㊙ 内部员工亲友专享,实实在在省钱,❌抢完不补! 今晚8点开抢,提前收藏>> https://t.vip.com/Im3KlTnDSJ8 2023年唯品会年度特卖大会热门会场推荐 1.唯品会年度特卖大会 限时加码!瓜分百万津贴!抢海量…

vue3+vite 批量引入局部组件及使用

目录结构 批量引入组件 例如:src/views/oss/components/customComponents.ts import { ref, defineAsyncComponent, markRaw } from vue;const modules import.meta.glob(./*.vue);//这告诉 TypeScript,components.value 是一个键为字符串、值为 define…

精彩回顾|迪捷软件先进装备软件技术研讨会之行圆满收官

2023年11月24日,为期3个月的先进装备软件高安全、高可靠、智能化验证技术系列研讨会在成都圆满收官。迪捷软件董事长康烁作为研讨会特邀专家,在西安、上海、成都站进行了演讲分享。 以航空航天、船舶、电力电子、汽车、医疗为代表的先进装备软件发展迅速…

KMP基础架构

前言 Kotlin可以用来开发全栈, 我们所熟悉的各个端几乎都支持(除了鸿蒙) 而我们要开发好KMP项目需要一个好的基础架构,这样不仅代码更清晰,而且能共享更多的代码 正文 我们可以先将KMP分为前端和服务端 它们两端也能共享一些代码,比如接口声明,bean类,基础工具类等 前端和…

数字系列——数字经济

数字经济是全球经济未来发展方向,正在成为重组全球要素资源、重塑全球经济结构、改变全球竞争格局的关键力量。都知道数字经确实很重要,但有些人还傻傻搞不懂数字经济到底是什么?小编今天就给大家捋一捋。 什么是数字经济? 数字经…

支持中文,性能超GPT-4!笑脸排名第一的纯代码模型

生成式AI代码开发平台Phind在官网发布了最新V7版本,性能方面超越GPT-4,运行效率提升了5倍,并且支持中文和16K超长上下文。 据悉,Phind V7是基于Phind的开源代码模型CodeLlama-34B V2,以及700亿个高质量代码和推理问题…

如何获取阿里巴巴中国站按图搜索1688商品(拍立淘) API接口(item_search_img-按图搜索1688商品(拍立淘))

一、背景介绍 阿里巴巴中国站作为中国领先的B2B电子商务平台,提供了大量的商品信息和交易服务。其中,按图搜索1688商品(拍立淘)是阿里巴巴中国站特有的功能之一,它可以通过上传图片来搜索与图片相似的商品&#xff0c…

Echarts大屏可视化_04 横向柱状图模块的引入和开发

模块的引入 1.寻找官方示例引入 ECharts官方实例入口 2.引入示例 ECharts 示例 可从这里直接进入 标题、提示信息、图例都不需要所以直接删掉 <div class"column"><div class"panel bar2"><h2>柱状图-技能掌握</h2><div cla…

基于Loki + Promtail + Grafana 搭建 Nginx 日志监控

文章目录 引言第一部分&#xff1a;Loki 简介与安装1.1 Loki 简介1.2 Loki 安装1.2.1 下载 Loki1.2.2 安装 Loki 1.3 启动 Loki 第二部分&#xff1a;Promtail 简介与安装2.1 Promtail 简介2.2 Promtail 安装2.2.1 下载 Promtail2.2.2 安装 Promtail 2.3 启动 Promtail 第三部分…