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。

运行结果:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

在java java.util.Date 已知逝去时间怎么求年月日 数学计算不用其他方法

在Java中,使用java.util.Date类已知逝去时间求年月日的方法如下: 首先,获取当前时间和逝去时间之间的毫秒数差值,可以使用Date类的getTime()方法获得时间戳。 将毫秒数转换为秒数,并计算出总共的天数。 根据总共的天…

【刷题笔记】两数之和II_二分法||二分查找||边界||符合思维方式

两数之和II_二分法||二分查找 1 题目描述 https://leetcode.cn/problems/two-sum-ii-input-array-is-sorted/ 给你一个下标从 1 开始的整数数组 numbers ,该数组已按 非递减顺序排列 ,请你从数组中找出满足相加之和等于目标数 target 的两个数。如果设…

天眼销:超有用的企业获客工具

天眼销是资深数据团队开发的一个客户资源查询平台,可以通过多重筛选:企业名称/信用代码,所在地区,行业,注册资本,年限,是否在营/有电话/邮箱等。 天眼销和某查查有什么区别? 天*查/…

鸿蒙(HarmonyOS)应用开发——应用程序入口UIAbility

概述 UIAbility是一种包含用户界面的应用组件,主要用于和用户进行交互 UIAbility是系统调度的单元,为应用提供窗口在其中绘制界面 应用程序的几种交互界面形式 点击桌面图标进入应用 一个应用拉起另一个应用 最近任务列表切回应用 每一个UI Abili…

含压缩空气储能的零排放综合能源系统优化调度程序代码!

本程序参考SCI期刊论文《Optimal dispatch of zero-carbon-emission micro Energy Internet integrated with non-supplementary fired compressed air energy storage system》,程序中有详细的热网模型,温度控制模块,压缩机模块,…

二、shell编程快速入门

目录 1、入门示例 2、解释器 3、shell脚本执行方式 3.1 方式一:sh执行脚本 3.2 方式二:工作目录执行 3.3 方式三:绝对路径执行 ​​​​​​​4、shell的数据类型 4.1 字符串 4.2 整数型 1、入门示例 以下所有操作都在/export/shel…

Web应用渗透测试完全指南(二)

📢专注于分享软件测试干货内容,欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!📢交流讨论:欢迎加入我们一起学习!📢资源分享:耗时200小时精选的「软件测试」资…

【开源】基于JAVA的天然气工程运维系统

项目编号: S 022 ,文末获取源码。 \color{red}{项目编号:S022,文末获取源码。} 项目编号:S022,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统角色分类2.2 核心功能2.2.1 流程…

lxd提权

lxd/lxc提权 漏洞介绍 lxd是一个root进程,它可以负责执行任意用户的lxd,unix套接字写入访问操作。而且在一些情况下,lxd不会调用它的用户权限进行检查和匹配 原理可以理解为用用户创建一个容器,再用容器挂载宿主机磁盘&#xf…

数据库安全运维系统厂家在深圳的有哪些?咨询电话多少?

IT小伙伴都知道,数据库安全运维至关重要,因为随着信息技术的不断发展,数据库已经成为企业存储、管理和处理数据的关键平台,数据库承载着企业不少数据资产。因此使用数据库安全运维系统是必要的。那你知道数据库安全运维系统厂家在…

Vue3 刷新后,pinia存储的数据丢失怎么解决

这个问题有两种解决办法: 一是使用pinia的持久化存储一是使用vue的依赖注入 刷新后,通过pinia存储的vue store数据丢失,实际上是因为Vue原组件卸载、新组件重新挂载导致的,vue store是挂载在组件上的,当刷新导致组件…

数据库的多表查询(MYSQL)表表联立

根据以上三张表格,对三张表格进行不同的联立,查询并显示符合条件的内容。 1. 查出至少有一个员工的部门。显示部门编号、部门名称、部门位置、部门人数。 mysql> SELECT d.deptno AS 部门编号, d.dname as 部门名称, d.loc as 部门位置, COUNT(e.emp…

uniapp2023年微信小程序头像+昵称分别获取

1、DOM <view class"m-user"><view class"user-info"><!--头像 GO--><button class"avatar avatar-wrapper" open-type"chooseAvatar" chooseavatar"onChooseAvatar"slot"right"><im…

2023-11-30 AIGC-让图片动起来的主流 AI 工具

摘要&#xff1a; 2023-11-30 AIGC-让图片动起来的主流 AI 工具 让图片动起来的主流 AI 工具 一、数字人播报 1、HeyGen 2、D-ID 3、SadTalker 二、图片生成视频 1、Runway Gen-2 2、Pika Labs 3、Genmo 三、伪3D动态效果 1、LeiaPix 2、剪映手机版 四、角色动画 Animated …

Sectigo代码签名证书——最优惠的解决方案

在软件开发领域&#xff0c;代码签名证书是确保软件安全和完整性的重要工具。它为开发者提供了一种验证其软件来源和内容的方式&#xff0c;同时向用户传递了信任和可靠性的信息。然而&#xff0c;高昂的代码签名证书费用一直是许多开发者面临的挑战之一。而Sectigo代码签名证书…

【漏洞复现】万户协同办公平台ezoffice SendFileCheckTemplateEdit.jsp接口存在SQL注入漏洞 附POC

漏洞描述 万户ezOFFICE协同管理平台是一个综合信息基础应用平台。 万户协同办公平台ezoffice SendFileCheckTemplateEdit.jsp接口存在SQL注入漏洞。 免责声明 技术文章仅供参考,任何个人和组织使用网络应当遵守宪法法律,遵守公共秩序,尊重社会公德,不得利用网络从事危害…

智能客服核心技术——预测会话与答案生成

1.信息检索 2. 句型模板匹配标准问题生成答案 3.根据知识图谱推理得到答案

【目标检测】进行实时检测计数时,在摄像头窗口显示实时计数个数

这里我是用我本地训练的基于yolov8环境的竹签计数模型&#xff0c;在打开摄像头窗口增加了实时计数显示的代码&#xff0c;可以直接运行&#xff0c;大家可以根据此代码进行修改&#xff0c;其底层原理时将检测出来的目标的个数显示了出来。 该项目链接&#xff1a;【目标检测…

区分(GIOU、DIOU、CIOU)(正则化、归一化、标准化)

一、IOU IoU 的全称为交并比&#xff08;Intersection over Union&#xff09;。IoU 计算的是 “预测的边框” 和 “真实的边框” 的交集和并集的比值。 1.GIOU&#xff1a;预测框&#xff08;蓝框&#xff09;和真实框&#xff08;绿框&#xff09;的最小外接矩形C。来获取预…

Pycharm使用远程服务器运行本地python文件

一、连接远程服务器 路径&#xff1a;Tools → Deployment → Configuration → SFTP → 取名 填写配置信息 二、配置python解释器 三、运行python文件