程序员经验分享-hwhale

v-for循环key用index的bug

2023-05-16

近期公司项目中出现了一个线上bug，场景为：我们使用列表list作为循环遍历一个子组件，key值用的list的index下标，list中的每一项item作为props属性传入子组件中，如图。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1LA41hV2-1595489856392)(/Users/huangwanbin/Library/Application Support/typora-user-images/image-20200723143158577.png)]
在子组件中，我们以item内的值为判断标准定义了一个组件的data属性，如图。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mBncymUY-1595489856397)(/Users/huangwanbin/Library/Application Support/typora-user-images/image-20200723142705360.png)]
组件如图:
在这里插入图片描述
然后我们在父组件中对list数组进行筛选操作，筛选过后，list长度变短，内容顺序自然变化，我们遍历的子组件顺序也相应发生变化。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xfhPpihv-1595489856402)(/Users/huangwanbin/Library/Application Support/typora-user-images/image-20200723143618818.png)]
这时bug出现了，我们第三个子组件经过筛选后，来到了第一位，这时它data中由item内值作为判断标准的isChange属性，竟然变成了筛选前第一个组件的isChange属性，子1的isChange是true，子3的isChange是false，筛选后子3的isChange变成了true，bug形成。

然后就找问题，虽然通过筛选改变了list数组，但传入子组件的数据是正确的，这样按理说，子组件data中数据是依托于传入数据，不会变才对，为什么第三个组件顺序变成第一位时，data里的数据变了呢？

研究其原因，发现是diff算法搞的鬼，Diff算法是计算出 Virtual DOM中被改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面。

如下图，更新后的子组件3来到了子组件1的位置，它的key值变成0，所以它将跟旧的中相同index也就是子组件1做比较，比较后diff算法只更改了props接收的item数据，因为data是个带返回值的函数，而此操作只是局部更新，并没有重新加载组件，所以data函数没有重新执行，而是沿用了原先index为0的data返回的数据，所以出现了该问题。
在这里插入图片描述
解决方法：使用item中的id作为key值进行遍历，问题解决。

tips：大家开发过程中使用v-for循环数组时，避免像俺一样图省事用index下标作为key值，推荐用item中的唯一属性作为key值，比如id这类值。加油~

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

for

key

index

Bug

v-for循环key用index的bug 的相关文章

  • 输入文本以跨越 Selenium/Python

    我尝试输入要跨越的文本来代替 示例文本 我正在使用 Selenium Python 但无法使用 send keys 方法来做到这一点 您还有其他想法吗 我该怎么做 我附上了 HTML 屏幕截图和应用程序屏幕截图 我尝试使用该代码 但不起作用

  • 如何过滤将键与索引数组中的值进行比较的关联数组？

    回调函数在array filter http php net manual en function array filter php只传入数组的值 而不传入键 如果我有 my array array foo gt 1 hello gt wo

  • 如果我们使用重复的哈希键插入 dynamo DB 中会发生什么？

    我正在尝试插入 dynamo DB 当我调用 putItem 函数时 如果哈希键已存在于数据库中 会发生什么情况 PutItemResult 对象是否包含可以告诉我们是否尝试重复哈希条目的内容 我想避免运行另一个查询来检查是否存在带有我正在

  • 使用字典中的键反转多个值

    我对 Python 和整体编程还很陌生 所以请耐心等待 我有一本字典 Male Female Eunuch 作为值和这些作为键的不同名称 Persons Hodor Male Tyrion Male Theon Male Arya Fema

  • 有没有办法将平面索引数组中的所有键更改为同一字符串（“名称”）？ [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 有没有办法将所有数字键更改为 Name 而不循环遍历数组 本机 PHP 函数 0 gt blabla 1 gt blabla 2 gt bl

  • Android KeyHash 调试时有效，从 APK 安装应用程序时无效

    我使用了 KeyHashthis https stackoverflow com a 6665263 4543067 当然 我将这个 KeyHash 包名称和主要活动类 复制到facebook设置中根据这个 https developers

  • 在 R 中向多直方图添加关键图例

    如何在下面的图中添加关键图例 我希望在右上角的某个地方有一个关键图例 其中有两个短水平颜色条 红色的应该说 整形手术出了问题 蓝色的应该说 德国 我使用以下代码来生成该图 bar2 lt read table div ana mut bar

  • 我不小心删除了 Android 密钥库，如何恢复？

    好吧 我的动作很顺利 我现在无法更新市场中的任何应用程序 因为我不小心删除了我的 Android 密钥库 有谁知道我怎样才能把它拿回来 我尝试过运行恢复程序 但由于某种原因它没有出现 如果您丢失了私钥 它将永远消失 除非您有备份 如果您可以

  • WPF 中 DataTemplate 中的 x:Key、x:Name 和 x:UID 有什么区别？

    我正在尝试在 WPF 中创建动态选项卡 并且正在尝试编写一个仅适用于某些选项卡项目的内容模板 我希望能够为内容模板创建一个标识符 以便我可以在后面的代码中引用它 这样我就可以有选择地将它应用于单个 TabControl 中的某些选项卡 但是

  • 有没有办法让字典键成为范围？

    如果这很明显 请原谅我 但我对 Python 非常非常陌生 我已经找到了从字典中获取多个键的方法 但这不是我想要做的 基本上我正在寻找这样的东西 my dict 1 10 foo 11 20 bar 91 100 baz 但其中的键实际上不

  • WPF：如何使文本块触发按键事件？

    TextBlock 有 KeyDown 和 KeyUp 事件 但它从未被触发 有办法让它发生吗 我只需要检测是否按下了任何键 首先 您需要设置Focusable http msdn microsoft com en us library s

  • 如何选择 jq 中作为变量提供的键的值？

    如果这是输入 a key 2 another key 100 one more key 4 2 通过提供键的名称作为变量来选择这些键的值的最佳方法是什么 理想情况下 我正在寻找类似的东西 a key as key key 但这会导致语法错误

  • 如何使用包含空格的键从Redis获取值？

    使用 telnet 我输入这样的命令行命令 get field with spaces get field with spaces get field with spaces 这三个都返回相同的错误 ERR wrong number of

  • 使用 data.table 中的多个键来获得条件搜索

    我有一个data table首先 我想根据某些条件获得一个子集 例如 我有 library data table dt lt data table rn 1 10 B rep 1 2 5 dt rn B 1 1 1 2 2 2 3 3 1

  • 返回 dynamodb 中具有最大排序键的项目

    我正在使用 python 脚本访问 AWS 中的 dynamodb 数据库 我有一个带有哈希键和排序键的表 对于给定的哈希键 我想找到具有小于某个值的最大排序键的项目 我怎样才能做到这一点 或者 有没有办法从给定的键查找前一项 I am n

  • 在java中注入击键

    我正在寻找一种将击键注入操作系统键盘输入缓冲区的方法 就像当您单击一个按钮时 程序会插入一个 或多个 键盘敲击 我想在java中执行此操作 因为我想在 win linux和osx 中运行它 我想我必须利用 JNI 有人有什么想法吗 感谢所有

  • openssl-使用密钥和 IV 解密 Base64 字符串

    我正在尝试解密已在 openssl 中使用 aes256 加密的 base64 字符串 我获得了会话密钥和 IV 它们是用我的密钥加密的 我将它们转换为十六进制 以便可以使用以下 openssl 命令 openssl enc d aes25

  • Python 元组作为键慢吗？

    我正在尝试实现字典中排序元组的快速查找 回答 元组 3 8 是否有关联值 如果有 它是什么 的问题 令元组中的整数从下方以 0 为界 从上方以 max int 为界 我继续使用 Python 的 dict 但发现速度相当慢 解决此问题的另一

  • 如何在C#中捕获键盘上的按键

    我有个问题 我需要写一个C 程序 输入 允许用户输入多行文本 按 Ctrl Enter 完成输入 输出 标准化 按照时间增加的正确顺序重新排列行 我尝试过 但我不知道如何从键盘捕获 Ctrl Enter 我期望输出像 例子 Created

  • 基于输入键的 Tabindex 通过获取表单元素在 Jquery 中不起作用

    我有一个表单 我可以通过它获取所有表单元素serializeArray 我想要focus 使用 Enter 键根据其 tabindex 值在表单元素上 只有当它有价值时 否则就专注于它本身 对 jQuery 来说不太新鲜 所以如果有任何错误

随机推荐

  • KPI异常检测

    异常 xff1a 预期值与真实值有很大的差异 统计的方法 3 sigma 刻画异常的程度 xff0c 数据需要接近高斯分布 xff0c 如果不是可以通过高斯分布或者tan变换 可以先看一下数据分布图 xff0c 看一下数据的分布情况 box

  • 如何干掉那又丑又长的switch..case语句

    1 前言 在实际的编程中 xff0c 我们经常会使用到switch case语句 xff0c 这通常也是对一长串if else if语句的优化 对于一些简单的情况 xff08 只每个case代码中代码长度不会很长 xff0c 而且case分

  • 编译安装Openvins过程中遇到的问题

    openvins的编译是依赖opencv contrib库的 xff0c 需要重新下载编译安装opencv xff0c opencv和opencv contrib的版本要对应一致 遇到问题的解决方法参考如下链接 xff1a https bl

  • docker镜像启动后端口号是多少_RSS、智能家居、个人博客、维基百科……Docker 入门指南...

    如果你购买过 VPS 云主机 xff0c 那么或多或少 xff0c 你都可能听说过 Docker 如果你从未听说过 Docker xff0c 那么本文可能能够为你开启新世界 利用 Docker xff0c 你能够非常轻松地部署各类服务 xf

  • linux can接收数据出错,CAN为什么会发送失败

    CAN总线调试过程中出现报文发送失败 xff0c 很多工程师都对此只知其一不知其二 xff0c 这里就CAN报文发送失败的问题我们来做一次探讨 在了解CAN报文为什么会发送失败之前我们先看看一条正确的CAN报文到底应该是怎么样的 xff0c

  • Unity | 总结：OCR文字识别、公式识别

    一 功能简介 xff1a 最近在做一个项目 xff1a 运用OCR文字识别 公式识别 手写英文识别等AI技术 xff0c 当用户批量导入图片或者PDF文件时可快速识别为可编辑文本 xff0c 该项目主要功能有 xff1a 印刷体识别 手写英

  • Unity | 打开文件对话框批量选择文件

    之前在新浪博客写了一篇关于打开文件对话框批量选择文件的文章 xff0c 可惜新浪博客不能写代码 xff0c 奈何当时太年轻 xff0c 并不觉得不方便 xff0c 直到遇到CSDN emmm xff0c 不想将就了 xff0c 所以在这里更

  • C++ | boost库入门

    目录 一 boost库简介 二 boost库安装及编译 1 目录结构说明 2 编译静态库 3 构建工具b2 三 boost库的简单使用 一 boost库简介 Boost是一个功能强大 构造精良 跨越平台 代码开源 完全免费的 C 43 43

  • C++ | boost库之智能指针

    目录 一 RAII机制 二 智能指针 1 C 43 43 98下auto ptr 2 boost scoped ptr 3 boost shared ptr make shared shared ptr应用于标准容器 定制删除器 weak

  • CMake I execute_process命令详解（配置）

    execute process COMMAND lt cmd1 gt lt arguments gt COMMAND lt cmd2 gt lt arguments gt WORKING DIRECTORY lt directory gt

  • CMake I add_custom_command命令详解（构建）

    目录 一 add custom command 1 执行有输出文件的自定义操作 2 执行没有输出的自定义操作 二 应用 1 执行有输出文件的自定义操作 2 执行没有输出的自定义操作 CMake提供了三个选项来在构建时执行自定义命令 xff0

  • ECMAScript6学习笔记-数组扩展

    1 扩展运算符 扩展运算符是三个点 xff0c 将一个数组转为用逗号分割的参数序列 console log span class hljs keyword span span class hljs number 1 span span cl

  • Cmake | ExternalProject_Add函数详解（构建时）

    目录 一 目录选项 1 PREFIX 2 TMP DIR 3 STAMP DIR 4 LOG DIR 5 DOWNLOAD DIR 6 SOURCE DIR 7 BINARY DIR 8 INSTALL DIR 二 下载配置 1 URL 2

  • OpenGL | 入门-零碎总结

    1 powf 幂函数 Pow函数是一种可以快速计算非线性关系的数学函数 xff0c 它的特点是任意非负整数x的n次幂可以快速计算 Pow函数可以通过数学方式简单地计算一个数的平方根 xff0c 立方根或任意次根 它主要用于计算连续的 非线性

  • OpenGL进阶 | GLM数学库& Shader相关

    一 GLM数学库 OpenGL和DirextX不一样 xff0c 没有内置的数学库 xff0c 于是我们需要找一个第三方数学库来完成OpenGL相关的数学计算 GLM库是一个为OpenGL准备的数学库 xff0c 它提供了各种数学运算的函数

  • OpenGL进阶 | 绘制一个三角形

    一 准备绘图数据 VBO xff08 Vertex Buffer Object xff09 在opengl中 xff0c 所有的数据都要放在显存中 xff0c 通过VBO xff08 Vertex Buffer Object xff09 可

  • AndroidStudio打开蓝牙、搜索目标设备并进行连接

    一 设置权限 要操作蓝牙 xff0c 先要在AndroidManifest xml里加入权限 xff1a BLUETOOTH xff1a 允许程序连接到已配对的蓝牙设备 BLUETOOTH ADMIN xff1a 允许程序发现和配对蓝牙设备

  • AndroidStudio|左右滑动切换界面效果

    通过Layout控件捕捉onTouch事件 xff0c 所以要实现OnTouchListener接口 xff1b 当用户触摸屏幕的时候 xff0c 会产生许多手势 xff0c 这里就包括滑动效果 通过GestureDetector类 xff

  • vcpkg安装_（基础篇 02）使用 Vcpkg 配置百度 AI 图像识别 C++开发环境(VS2017)

    本机环境 Windows 10 专业版Visual Studio Community 2017 版本 15 9 7 Windows 下配置 Vcpkg Vcpkg 是适用于 Windows xff0c Linux 和 MacOS 的 C 4

  • v-for循环key用index的bug

    近期公司项目中出现了一个线上bug xff0c 场景为 xff1a 我们使用列表list作为循环遍历一个子组件 xff0c key值用的list的index下标 xff0c list中的每一项item作为props属性传入子组件中 xff0

热门标签