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

news/2025/1/9 5:08:05/

在实际开发工程中通过获取后端数据监听判断数组中长度是否大于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.ppmy.cn/news/1251034.html

相关文章

【Linux学习】文件描述符重定向缓冲区

目录 九.文件描述符 9.1 文件描述符概念 9.2 文件描述符的分配规则 9.3 重定向 9.3.1 常见的重定向操作 9.3.2 重定向的原理 9.4 缓冲区 9.4.1 缓冲区概念 9.4.2 缓冲区刷新策略 9.4.3 C语言的缓冲区在哪里? 九.文件描述符 9.1 文件描述符概念 在上一篇讲到基础IO时,我们说到…

基于Pix2Struct的文档信息提取【DocVQA】

文档信息提取涉及使用计算机算法从非结构化或半结构化文档(例如报告、电子邮件和网页)中提取结构化数据(例如员工姓名、地址、职务、电话号码等)。 提取的信息可用于各种目的,例如分析和分类。 DocVQA(文档…

2、Mysql基准测试

准测试是针对系统设计的一种压力测试。通常的目标是为了掌握系统的行为。 为什么需要基准测试 基准测试是唯一方便有效的,可以学习系统在给定的工作负载下会发生什么的方法。基准测试可以观察系统在不同压力下的行为,评估系统的容量,掌握哪些…

Linux系统iptables扩展

目录 一. iptables规则保存 1. 导出规则保存 2. 自动重载规则 ①. 当前用户生效 ②. 全局生效 二. 自定义链 1. 新建自定义链 2. 重命名自定义链 3. 添加自定义链规则 4. 调用自定义链规则 5. 删除自定义链 三. NAT 1. SNAT 2. DNAT 3. 实验 ①. 实验要求 ②. …

Rust UI开发(5):iced中如何进行页面布局(pick_list的使用)?(串口调试助手)

注:此文适合于对rust有一些了解的朋友 iced是一个跨平台的GUI库,用于为rust语言程序构建UI界面。 这是一个系列博文,本文是第五篇,前四篇链接: 1、Rust UI开发(一):使用iced构建UI时…

LeetCode(46)汇总区间【区间】【简单】

目录 1.题目2.答案3.提交结果截图 链接: 汇总区间 1.题目 给定一个 无重复元素 的 有序 整数数组 nums 。 返回 恰好覆盖数组中所有数字 的 最小有序 区间范围列表 。也就是说,nums 的每个元素都恰好被某个区间范围所覆盖,并且不存在属于某…

Python edge-tts库全部声音模型一览表

下面是edge-tts的声音模型,zh-CN为中文语音模型 Name: af-ZA-AdriNeural Gender: Female Name: af-ZA-WillemNeural Gender: Male Name: am-ET-AmehaNeural Gender: Male Name: am-ET-MekdesNeural Gender: Female Name: ar-AE-FatimaNeural Gender: Female N…

LeetCode(39)赎金信【哈希表】【简单】

目录 1.题目2.答案3.提交结果截图 链接: 赎金信 1.题目 给你两个字符串:ransomNote 和 magazine ,判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以,返回 true ;否则返回 false 。 magazine 中的每个字…