React / Vue 组件中的key详谈

wen_binObject wen_binObject 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.1k累计阅读 1.2k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄10年
关注
原创 最新推荐文章于 2026-05-04 10:00:00 发布 1.1k 阅读 AI 写同款· GEO 优化 ›
1、写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？ 在vue和react里，DOM的操作采用diff算法，就是最小局部刷新, 当key不设置时，会自动将数组的下标设置为key, 在实际项目过程中，建议取数组中对象的唯一值来做key, 因为用数组下标做为key值时，会出现问题 例如，当页面上有4个input框，分别填入a,b,c,d，当删除b时，会发现页面上还保留a,b,c 这是因为用数组下标来做key时，绑定的key值为0,1,2,3，分别对应a,b,c,d， 当删除了b时，数组的内容变化，但是下标是0,1,2，按照之前key值的绑定，会被认.. 阅读详情

我先回答这个问题:
key的作用主要是为了高效的更新虚拟DOM
在diff算法中 key是为了在diff算法执行时更快的找到对应的节点，提高diff速度

  1. 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。
  2. 同一层级的一组节点，他们可以通过唯一的id进行区分。
    基于以上这两点假设，使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。

这里我们借用React’s diff algorithm中的一张图来简单说明一下：
在这里插入图片描述
当页面的数据发生变化时，Diff算法只会比较同一层级的节点：

如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点了。
如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。

diff算法默认情况是
在这里插入图片描述
如果想在B,C中间插入F
在这里插入图片描述
执行起来实际效果是这个样子的，这样执行起来效率低。

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
在这里插入图片描述
diff算法源码相关已经有大牛写过了我也看过 具体可以参考vue diff 详解

收录于
个人日记

当前文章被收录于：

个人日记
70 篇文章 1 人学习
订阅专栏 查看详情
vue

当前文章被收录于：

vue
8 篇文章 0 人学习
订阅专栏 查看详情
标签
#vue #react #key #diff
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
从零搭建ROS机械臂仿真环境：Ubuntu 20.04+Noetic下配置睿尔曼RM65的完整流程 本文详细介绍了在Ubuntu 20.04系统中，基于ROS Noetic搭建睿尔曼RM65机械臂的完整仿真环境。从环境准备、工作空间创建到MoveIt!配置与Gazebo仿真环境集成，提供了完整的流程和优化建议，帮助开发者高效实现机械臂仿真与调试。 阅读详情

相关推荐

专栏丨华为HN8145XR光猫获取超级管理员密码

摘要：本文详细介绍了华为HN8145xr光猫获取超级管理员权限的完整步骤。首先通过ONT使能工具补全shell，然后利用Telnet登录光猫后台进行操作。文章提供了多种获取超级密码的方法，包括配置文件解密、一键查询工具等，并针对联通光猫特别说明了默认密码格式（CUAdmin+后八位数字）。此外，还介绍了恢复出厂设置、修改SSID等实用操作，帮助用户完全掌控光猫设备。文末附有详细的命令行操作指南，适合有一定技术基础的用户参考。

8280

vue 中的 key

Key 是什么key 的作用主要是为了高效的更新虚拟 DOMkey 是给每一个 vnode 的唯一 id，也是 diff 的一种优化策略，可以根据 key，更准确， 更快的找到对应的 vnode 节点,这个 key 的作用是用来加速这个比较的过程的。开始之前，我们先还原两个实际工作场景那么这背后的逻辑是什么，key的作用又是什么？一句话来讲key 是给每一个 vnode 的唯一 id，也是 diff 的一种优化策略，可以根据 key，更准确， 更快的找到对应的 vnode 节点。

weixin_70317227的博客 819

在摩尔线程 MTT S80 上使用 Ollama 进行 DeepSeek R1 蒸馏版模型推理

本文主要介绍了如何在摩尔线程 MTT S80 上通过 Ollama 快速完成DeepSeek R1 蒸馏系列模型的推理。

摩尔线程blog中心 3601

Vue中的key

页面上的标签都对应具体的虚拟 dom 对象(虚拟 dom 就是 js 对象), 循环中 ,如果没有唯一 key , 页面上删除一条标签, 由于并不知道删除的是哪一条! 所以要把全部虚拟 dom 重新渲染, 如果知道 key 为对应标签被删除掉, 只需要把渲染的 dom 为对应标签去掉即可!

qq_54591762的博客 2782

用PyCharm+Scrapy打造你的第一个爬虫：从安装到实战（附完整代码）

本文详细介绍了如何使用PyCharm和Scrapy框架从零开始构建高效网络爬虫。通过环境配置、项目创建、核心爬虫逻辑编写到数据处理与存储的完整流程，帮助Python开发者快速掌握爬虫开发技巧，并附有实战代码示例。特别适合想要学习Scrapy框架和提升爬虫技能的开发者。

weixin_29038345的博客 869

【数据集】米级别热红外卫星合集：SDGSAT-1、HotSat-1等

米级别热红外卫星合集：SDGSAT-1、HotSat-1等

WW、forever的博客 1252

Vue中的key有什么作用？

需要注意的是，key 只在其直接的子组件中起作用，如果两个组件的 key 相同，但它们不是直接的子组件，则 Vue 仍然会重新渲染它们。保持组件状态 在使用 v-for 指令渲染列表时，每个列表项都应该拥有唯一的 key，这样可以在列表项顺序改变时，Vue。提高渲染效率 当 Vue 在进行虚拟 DOM 的 diff 算法比较新旧节点时，如果节点具有相同的 key，则 Vue。可以准确地判断哪些列表项是新添加的，哪些列表项是已存在但位置改变的，哪些列表项是被删除的，从而保持组件状态的正确性。

m0_54566205的博客 2605

2. 第一个 SAP CDS View 源代码的详细解析：CDS View 和底层自动生成 SQL View 的关系讲解

笔者前一篇教程文章，带着大家在 ABAP 系统创建了一个最简单的基于sflight数据库表的 CDS View：本文对这简单的 14 行源代码背后的知识点进行详细讲解。CDS 全称是 Core Data Services，它是一种数据建模技术，帮助开发者以更直观和高层的方式去描述数据库中所需的数据结构。在一个典型的 SAP ABAP 开发场景里，CDS 经常被用来编写各种用于报表、接口或业务逻辑的数据视图。通常，这些视图包含一系列注解。

2007 年 ~ 2025 年，深耕 SAP 技术 18 年 1027

讲讲vue 中的 key

在 Vue 中，使用key属性可以帮助 Vue 识别每个列表中的子元素，并且在 DOM 更新时对它们进行精确控制。具体来说，当使用v-for指令循环渲染一个列表时，Vue 会根据每个子元素的key值来判断该子元素是否已经存在于 DOM 树中，从而决定是否需要重新创建、更新或删除该元素。当 Vue 在处理列表时，首先会根据每个子元素的key值和位置信息生成一个虚拟节点（VNode），然后通过比较两次更新之间的 VNode，来判断哪些元素需要被新增、更新或删除。

Qiang_7950的博客 1714

【MODBUS】Java实现的Modbus协议类库——推荐j2mod库

Jamod是另一个开源的Modbus Java库。这个库的设计是完全面向对象的，基于抽象，应该支持易于理解、可重用性和可扩展性。它支持Modbus RTU和Modbus TCP，并且提供了主站和从站的功能。这是jamod Modbus库的一个分支，取自1.2.1版本，根据Apache 2许可证发布，包含在该项目的SVN存储库中。j2mod项目的目标是基于Java编程语言生成一个功能更全面的Modbus（tm）通信库。这是一个积极开发的项目，接受具有Modbus主站和从站开发经验的专业软件工程师提交的文件。

开源物联网项目商业化作者 5639

基于STM32+华为云设计的智能鱼缸

本项目基于STM32单片机设计一款基于物联网的智能鱼缸系统，并通过应用侧接口开发上位机APP实现远程对鱼缸参数的检测和控制。该系统包括水温检测、水质检测、自动或手动换水、氛围灯灯光变换和自动或手动喂食等功能，可以帮助用户更好地管理鱼缸，提高鱼儿的生存率，同时增强用户对家庭装饰品的掌控感和科技感。

1万+

在 Vue 项目中，为什么要在列表组件中写 key，其作用是什么？

key是Vue列表渲染的核心优化机制，正确使用可显著提升性能并避免状态错乱。开发中需遵循唯一性、稳定性原则，优先选择数据ID作为key，避免索引和动态值。在复杂场景（如排序、动态组件）中，合理利用key能确保应用的高效与稳定。

程序员学习园地。 1211

华为OD机试真题 新系统 2026-04-26 Python&JS 实现【最大化游戏试玩资格分发】

新研发了一台游戏设备可以面向用户接受试玩。现有 n 个试玩申请，每个试玩有开始时间和结束时间。作为协调员，为了能让更多人体验到游戏，你需要对试玩申请进行选择，使得：

MISAYAONE的博客 291

写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么

写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？ 没有绑定key的情况下，并且在遍历模板简单的情况下，会导致虚拟新旧节点对比更快，节点也会复用。而这种复用就是就地复用，一种鸭子辨型的复用。 <div id="app"> <div v-for="i in dataList">{{ i }}</div> </div> var vm = new Vue({ el: '#app', data: { dat

qq_43182723的博客 1383

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能：商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传，基本资料下载，开钱箱、小票打印、收款结算，支持多币种付款方式（现金、储值卡、礼券、微信等）,支持多种促销。运行环境：.net 4.0登陆信息用户名:1001 密码:123456内置商品信息，商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

老版QQ原生表情gif动态

这是老版的QQ表情，不过全是动态的的，Windows照片查看器是不会动的，可以右击用浏览器打开查看，再说一遍是老版的，只是分享给宁愿用老版也要动态的人。

React / Vue 项目时为什么要在列表组件中写 key， 其作用是什么？

React / Vue 项目时为什么要在列表组件中写 key， 其作用是什么？

DHLSP15的博客 583

温度PID控制PLC程序

温度PID稳定控制程序，适用于欧姆龙PLC，对其他PLC也具有很大参考价值

在React/Vue 项目列表组件中写 key，其作用是什么？

diff 算法在我的另一篇有解释，这个是之前整理的面试题，环环相扣，关于react的基础：看了前三个就能基本理解diff啦~ 此篇我们只讨论key在列表组件中的作用！ 有人认为基于没有key的情况diff速度会更快。确实，这种观点并没有错，没有绑定key的情况下，并且在遍历模板简单的情况下，会导致虚拟新旧节点对比更快，节点也会复用。而这种复用是就地复用，一种鸭子辩型的复用。 <div i...

王阿星的博客 681

VC中sqlite的使用

在VC中对sqlite的使用，实现数据库大批数据的快速插入，读取数据库中的数据在ListCtrl中显示

React / Vue 项目时在列表组件中的 key

初始代码： <div id="app"> <div v-for="i in dataList">{{ i }}</div> </div> var vm = new Vue({ el: '#app', data: { dataList: [1, 2, 3, 4, 5] } }) 有...

weixin_30408739的博客 124

写React/Vue项目时为什么要在列表组件中写key，其作用是什么？

写React/Vue项目时为什么要在列表组件中写key，其作用是什么？ 没有绑定key的情况下，在遍历简会导致虚拟新单模板的情况下，旧节点对比更快，节点也会复用。而这种复用是就地复用，一种鸭子辩型的复用。 <div id="app"> <div v-for="i in dataList">{{ i }}</div> </div> v...

巧克力很苦的小博客 1006

React/Vue项目中为什么要在列表组件中设置key

个人学习

Symin_的博客 258

写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？

key的作用就是给每一个VNode一个唯一的key，通过key可以更准确更快的拿到VNode。 vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应的旧节点。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。 在不带key的情况下...

foradmin的博客 2391

1、写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么

https://blog.youkuaiyun.com/qq_43182723/article/details/106802452

Slueia的博客 147

写React/Vue项目时为什么要在列表组件中写key，其作用是什么

vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点 那么在vue的diff函数中在交叉对比中，当新节点跟旧节点 头尾交叉对比 没有结果时，会根据新节点的key去对比旧节点数组中key，从而找到相对应的节点。如果没有找到就认为是一个新增节点。而如果没有key，那么就会采用遍历方式去查找对应的旧节点。 在没有绑定key的情况下，并且在遍历模板简单的情况下，会导致虚拟新旧节点对比更快...

xiaoHelloWord的博客 549

vue列表渲染中key的作用_写React/Vue项目时为什么要在列表组件中写key，其作用是什么？...

没有绑定key的情况下，在遍历简单模板的情况下，会导致虚拟新旧节点对比更快，节点也会复用。而这种复用是就地复用，一种鸭子辩型的复用。{{ i }}var vm = new Vue({el: '#app',data: {dataList: [1, 2, 3, 4, 5]}})以上的例子，v-for的内容会生成以下的dom节点数组，我们给每一个节点标记一个身份id：['1', // id： A'2',...

weixin_39673471的博客 300

vue map遍历_写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？

记得点击蓝字关注我们哦！经典面试题1.写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中(建议先了解一下diff算法过程)。在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点(这里对应的是一个k...

weixin_39552304的博客 166

前端培训-写 React/Vue 项目时为什么要在组件中写 key

在交叉对比的时候，当新节点跟旧节点头尾交叉对比没有结果的时候，会根据新节点的 key 去对比旧节点数组中的 key，从而找到相应旧节点（这里对应的是一个 key => index 的 map 映射）。virtual DOM，当virtual dom某个节点的数据改变后生成一个新的Vnode，然后将Vnode和oldVnode对比，当然有不同的地方教就直接修改在真实DOM上，然后是oldVnode=Vnode。key 的作用是为了在 diff 算法执行时更快的找到对应的节点，提高 diff 速度。

zjjcchina的博客 104
上一篇： mysql 存储过程（Stored Procedure）
下一篇： java 多态的学习和堆栈方法区画图 向上转型 向下转型
点赞 0
评论 0
书签 书签 3
wen_binObject
wen_binObject
博客等级 码龄10年 51粉丝 63原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值