当前位置： 首页 > news >正文

vue基础知识十七：你知道vue中key的原理吗？说说你对它的理解

news 2026/5/21 17:42:03

在这里插入图片描述
一、Key是什么

开始之前，我们先还原两个实际工作场景

1.当我们在使用v-for时，需要给单元加上key

<ul><li v-for="item in items" :key="item.id">...</li>
</ul>

2.用+new Date()生成的时间戳作为key，手动强制触发重新渲染

 <Comp :key="+new Date()" />

那么这背后的逻辑是什么，key的作用又是什么？

一句话来讲

key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点

场景背后的逻辑

当我们在使用v-for时，需要给单元加上key

  • 如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。
  • 如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed

用+new Date()生成的时间戳作为key，手动强制触发重新渲染

  • 当拥有新值的rerender作为key时，拥有了新key的Comp出现了，那么旧key Comp会被移除，新key Comp触发渲染

二、设置key与不设置key区别

举个例子：

创建一个实例，2秒后往items数组插入数据

<body><div id="demo"><p v-for="item in items" :key="item">{{item}}</p></div><script src="../../dist/vue.js"></script><script>// 创建实例const app = new Vue({el: '#demo',data: { items: ['a', 'b', 'c', 'd', 'e'] },mounted () {setTimeout(() => { this.items.splice(2, 0, 'f')  // }, 2000);},});</script>
</body>

在不使用key的情况，vue会进行这样的操作：
在这里插入图片描述
分析下整体流程：

  • 比较A，A，相同类型的节点，进行patch，但数据相同，不发生dom操作
  • 比较B，B，相同类型的节点，进行patch，但数据相同，不发生dom操作
  • 比较C，F，相同类型的节点，进行patch，数据不同，发生dom操作
  • 比较D，C，相同类型的节点，进行patch，数据不同，发生dom操作
  • 比较E，D，相同类型的节点，进行patch，数据不同，发生dom操作
  • 循环结束，将E插入到DOM中

一共发生了3次更新，1次插入操作

在使用key的情况：vue会进行这样的操作：

  • 比较A，A，相同类型的节点，进行patch，但数据相同，不发生dom操作
  • 比较B，B，相同类型的节点，进行patch，但数据相同，不发生dom操作
  • 比较C，F，不相同类型的节点
  • 比较E、E，相同类型的节点，进行patch，但数据相同，不发生dom操作
  • 比较D、D，相同类型的节点，进行patch，但数据相同，不发生dom操作
  • 比较C、C，相同类型的节点，进行patch，但数据相同，不发生dom操作
  • 循环结束，将F插入到C之前

一共发生了0次更新，1次插入操作

通过上面两个小例子，可见设置key能够大大减少对页面的DOM操作，提高了diff效率

设置key值一定能提高diff效率吗？

其实不然，文档中也明确表示

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升

三、原理分析

源码位置：core/vdom/patch.js

这里判断是否为同一个key，首先判断的是key值是否相等如果没有设置key，那么key为undefined，这时候undefined是恒等于undefined

function sameVnode (a, b) {return (a.key === b.key && ((a.tag === b.tag &&a.isComment === b.isComment &&isDef(a.data) === isDef(b.data) &&sameInputType(a, b)) || (isTrue(a.isAsyncPlaceholder) &&a.asyncFactory === b.asyncFactory &&isUndef(b.asyncFactory.error))))
}

updateChildren方法中会对新旧vnode进行diff，然后将比对出的结果用来更新真实的DOM

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {...while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (isUndef(oldStartVnode)) {...} else if (isUndef(oldEndVnode)) {...} else if (sameVnode(oldStartVnode, newStartVnode)) {...} else if (sameVnode(oldEndVnode, newEndVnode)) {...} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right...} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left...} else {if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)idxInOld = isDef(newStartVnode.key)? oldKeyToIdx[newStartVnode.key]: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)if (isUndef(idxInOld)) { // New elementcreateElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)} else {vnodeToMove = oldCh[idxInOld]if (sameVnode(vnodeToMove, newStartVnode)) {patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)oldCh[idxInOld] = undefinedcanMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)} else {// same key but different element. treat as new elementcreateElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)}}newStartVnode = newCh[++newStartIdx]}}...
}

相关文章：

vue基础知识十七：你知道vue中key的原理吗？说说你对它的理解

一、Key是什么 开始之前&#xff0c;我们先还原两个实际工作场景 1.当我们在使用v-for时&#xff0c;需要给单元加上key <ul><li v-for"item in items" :key"item.id">...</li> </ul>2.用new Date()生成的时间戳作为key&#x…...

编程日记 2023/10/18 1:40:52

攻防演练蓝队|Windows应急响应入侵排查

文章目录 日志分析web日志windows系统日志 文件排查进程排查新增、隐藏账号排查启动项/服务/计划任务排查工具 日志分析 web日志 dirpro扫描目录&#xff0c;sqlmap扫描dvwa Python dirpro -u http://192.168.52.129 -b sqlmap -u "http://192.168.52.129/dvwa/vulnera…...

编程日记 2023/10/18 1:38:49

uniapp 小程序实现图片宽度100%、高度自适应的效果

因为image组件默认是有宽度跟高度的&#xff0c;所以这个高度不怎么好写 通过load事件来控制图片的高度 话不多说&#xff0c;直接上代码&#xff0c; <image class"img" src"/static/image.png" :style"{ height: imgHeight px }"mode&q…...

编程日记 2023/10/18 1:37:48

05. NXP官方SDK使用实验

05. NXP官方SDK使用实验 官方SDK移植 官方SDK移植 新建cc.h文件 SDK包里面会用到很多数据类型&#xff0c;所以需要在该文件中定义一些常用的数据类型 #pragma once #define __I volatile #define __O volatile #define __IO volatiletypedef sig…...

编程日记 2023/10/18 1:36:48

Python- JSON使用初探

JSON 在JSON格式中&#xff0c;{} 和 [] 是两种主要的数据结构&#xff0c;分别表示对象&#xff08;或称为字典、哈希、map&#xff09;和数组&#xff08;或称为列表、序列&#xff09;。 {} - 对象 在JSON中&#xff0c;对象是一组"key": value对的集合。这些键必…...

编程日记 2023/10/18 1:35:46

vim的配置文件

用户级别配置文件 ~/.vimrc 修改用户级别的配置文件只会影响当前用户, 不会影响其他的用户. 例如: 在用户的家目录下的.vimrc文件中添加 set tabstop4 ----设置缩进4个空格 set nu ----设置行号 set shiftwidth4 —设置ggG缩进4个空格, 默认是缩进8个空格 系统级别配置文件 /e…...

编程日记 2023/10/18 1:34:45

[python] pytest

在写一个项目前, 可以先编写测试模块 测试模块中包含了一个个最小的功能 当每一个功能都完善正确时 再将这些功能转换成项目运行的功能 多个项目运行的功能就组成了一个模块 多个模块就组成了一个项目服务 pytest 是一个 Python 测试框架&#xff0c;它提供了简单易用的语…...

编程日记 2023/10/18 1:33:44

【王道代码】【2.2顺序表】d1

关键字&#xff1a; 删除最小值最后位补齐&#xff1b;逆置&#xff1b;删除所有x&#xff1b;删除值为s到t区间的元素...

编程日记 2023/10/18 1:32:43

【Linux】【创建文件】Linux系统下在命令行中创建文件的方法

&#x1f41a;作者简介&#xff1a;花神庙码农&#xff08;专注于Linux、WLAN、TCP/IP、Python等技术方向&#xff09;&#x1f433;博客主页&#xff1a;花神庙码农 &#xff0c;地址&#xff1a;https://blog.csdn.net/qxhgd&#x1f310;系列专栏&#xff1a;Linux技术&…...

编程日记 2023/10/18 1:31:42

Pytorch之MobileViT图像分类

文章目录 前言一、Transformer存在的问题二、MobileViT1.MobileViT网络结构&#x1f353; Vision Transformer结构&#x1f349;MobileViT结构 2.MV2(MobileNet v2 block)3.MobileViT block&#x1f947;Local representations&#x1f948;Transformers as Convolutions (glob…...

编程日记 2023/10/18 1:30:41

03在命令行环境中创建Maven版的Java工程,了解pom.xml文件的结构,了解Java工程的目录结构并编写代码,执行Maven相关的构建命令

创建Maven版的Java工程 Maven工程的坐标 数学中使用x、y、z三个向量可以在空间中唯一的定位一个点, Maven中也可以使用groupId,artifactId,version三个向量在Maven的仓库中唯一的定位到一个jar包 groupId: 公司或组织域名的倒序, 通常也会加上项目名称代表公司或组织开发的一…...

编程日记 2023/10/18 1:29:40

论文阅读：CenterFormer: Center-based Transformer for 3D Object Detection

目录 概要 Motivation 整体架构流程 技术细节 Multi-scale Center Proposal Network Multi-scale Center Transformer Decoder Multi-frame CenterFormer 小结 论文地址&#xff1a;[2209.05588] CenterFormer: Center-based Transformer for 3D Object Detection (arx…...

编程日记 2023/10/18 1:28:37

Arduino驱动BNO055九轴绝对定向传感器（惯性测量传感器篇）

目录 1、传感器特性 2、硬件原理图 3、控制器和传感器连线图 4、驱动程序 BNO055是实现智能9轴绝对定向的新型传感器IC，它将整个传感器系统级封装在一起，集成了三轴14位加速度计，三轴16位陀螺仪，三轴地磁传感器和一个自带算法处理的32位微控制器。...

编程日记 2023/10/18 1:27:35

MQTT测试工具及使用教程

一步一步来&#xff1a;MQTT服务器搭建、MQTT客户端使用-CSDN博客 MQTT X 使用指南_mqttx使用教程-CSDN博客...

编程日记 2023/10/18 1:26:34

yolov7改进优化之蒸馏（一）

最近比较忙&#xff0c;有一段时间没更新了&#xff0c;最近yolov7用的比较多&#xff0c;总结一下。上一篇yolov5及yolov7实战之剪枝_CodingInCV的博客-CSDN博客 我们讲了通过剪枝来裁剪我们的模型&#xff0c;达到在精度损失不大的情况下&#xff0c;提高模型速度的目的。上一…...

编程日记 2023/10/18 1:25:33

视频美颜SDK，提升企业视频通话质量与形象

在今天的数字时代&#xff0c;视频通话已经成为企业与客户、员工之间不可或缺的沟通方式。然而&#xff0c;由于网络环境、设备性能等因素的影响&#xff0c;视频通话中的画面质量往往难以达到预期效果。为了提升视频通话的质量与形象&#xff0c;美摄美颜SDK应运而生&#xff…...

编程日记 2023/10/18 1:24:32

webmin远程命令执行漏洞

文章目录 漏洞编号&#xff1a;漏洞描述&#xff1a;影响版本&#xff1a;利用方法&#xff08;利用案例&#xff09;&#xff1a;安装环境漏洞复现 附带文件&#xff1a;加固建议&#xff1a;参考信息&#xff1a;漏洞分类&#xff1a; Webmin 远程命令执行漏洞&#xff08;CV…...

编程日记 2023/10/18 1:23:31

docker离线安装和使用

通过修改daemon配置文件/etc/docker/daemon.json来使用加速器sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-EOF {"registry-mirrors": ["https://ullx9uta.mirror.aliyuncs.com"] } EOF sudo systemctl daemon-reload sudo syste…...

编程日记 2023/10/18 1:22:30

解决 MyBatis 一对多查询中，出现每组元素只有一个，总组数与元素数总数相等的问题

文章目录 问题简述场景描述问题描述问题原因解决办法 问题简述 笔者在使用 MyBatis 进行一对多查询的时候遇到一个奇怪的问题。对于笔者的一对多的查询结果&#xff0c;出现了这样的一个现象&#xff1a;原来每个组里有多个元素&#xff0c;查询目标是查询所查的组&#xff0c;…...

编程日记 2023/10/18 1:21:29

这应该是关于回归模型最全的总结了（附原理+代码）

本文将继续修炼回归模型算法&#xff0c;并总结了一些常用的除线性回归模型之外的模型&#xff0c;其中包括一些单模型及集成学习器。 保序回归、多项式回归、多输出回归、多输出K近邻回归、决策树回归、多输出决策树回归、AdaBoost回归、梯度提升决策树回归、人工神经网络、随…...

编程日记 2023/10/18 1:20:28

ARMv8 A64内存拷贝指令CPYFPRTWN详解与优化

1. A64内存拷贝指令概述 在ARMv8架构中&#xff0c;内存拷贝操作是系统编程和底层优化的基础功能。CPYF*系列指令作为A64指令集的重要组成部分&#xff0c;提供了硬件级的内存数据搬运能力。与传统的软件循环拷贝相比&#xff0c;这些指令具有显著的性能优势&#xff1a; 单指…...

编程新知 2026/5/21 17:28:08

剪映专业版教程：制作直接选择排序算法原理演示视频

前言 今天教大家用剪映制作直接选择排序算法的原理演示视频。直接选择排序的原理是&#xff1a;在同一个数组中&#xff0c;先挑一个最小的&#xff0c;跟第一位交换&#xff1b;待排序下标往后移到第二位&#xff0c;从这里开始往后找一个最小的&#xff0c;跟第二位交换&…...

编程新知 2026/5/21 17:19:38

虚实融合新纪元：UWB物理锚点 vs 镜像视界数维空间无感定位

虚实融合新纪元&#xff1a;UWB物理锚点 vs 镜像视界数维空间无感定位虚实融合产业正从“物理锚点绑定”迈向“数维空间原生映射”新纪元。UWB以基站与标签构建刚性物理坐标体系&#xff0c;是虚实同步的硬件依赖范式&#xff1b;镜像视界浙江科技有限公司以纯视觉AI重构空间感…...

编程新知 2026/5/21 16:36:12

Cursor Free VIP技术架构深度解析：设备标识重置与多平台兼容实现

Cursor Free VIP技术架构深度解析&#xff1a;设备标识重置与多平台兼容实现 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reache…...

编程新知 2026/5/21 16:00:43

Pure Live：你的纯净直播聚合解决方案，告别平台切换烦恼

Pure Live&#xff1a;你的纯净直播聚合解决方案&#xff0c;告别平台切换烦恼 【免费下载链接】pure_live A Flutter project can make you watch live with ease. 项目地址: https://gitcode.com/gh_mirrors/pu/pure_live 你是否曾为同时关注多个直播平台的主播而感到…...

编程新知 2026/5/21 15:18:52

ElevenLabs缅甸文语音准确率仅68.3%？实测对比5种预处理方案，第4种提升至92.7%（附Jupyter验证代码）

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;ElevenLabs缅甸文语音准确率实测基准与问题定位 为系统评估 ElevenLabs 对缅甸文&#xff08;Burmese, my-MM&#xff09;语音合成的准确性&#xff0c;我们在统一硬件环境&#xff08;Intel i7-11800H 32GB …...

编程新知 2026/5/21 15:09:17

从原理图到PCB：STM32最小系统外围电路布局布线实战避坑指南

从原理图到PCB&#xff1a;STM32最小系统外围电路布局布线实战避坑指南 在嵌入式硬件开发中&#xff0c;设计一个可靠的STM32最小系统PCB远比绘制原理图更具挑战性。许多开发者能够正确连接原理图符号&#xff0c;却在将设计转化为实际电路板时遭遇各种问题——从莫名其妙的复位…...

编程新知 2026/5/21 14:19:51

波兰市场语音本地化迫在眉睫，ElevenLabs波兰语支持深度评测：WAV质量、时延、重音准确率98.7%实测数据曝光

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;波兰市场语音本地化战略紧迫性分析 波兰作为欧盟第六大经济体和中东欧数字化转型先锋&#xff0c;其语音技术采纳率正以年均23.7%的速度攀升。截至2024年Q2&#xff0c;波兰智能音箱渗透率达38%&#xff0c;而…...

编程新知 2026/5/21 14:13:12

AI原生组织：从「加AI功能」到「长AI基因」，大企业实践与中小团队轻量思路揭秘

AI原生组织&#xff1a;从「加AI功能」到「长AI基因」的本质跃迁与落地路径AI原生组织并非给传统企业贴AI膏药&#xff0c;而是围绕人机协同重新设计业务逻辑、组织架构和激励机制。下面从认知误区切入&#xff0c;结合阿里、华为、传神等企业案例&#xff0c;拆解AI原生组织的…...

编程新知 2026/5/21 14:06:30

20260518 Swift实验

Swift实验 控制节点新添加一块20GB磁盘 新添磁盘分成两个区&#xff0c;并格式化 分区一&#xff1a;挂载到obs1目录 分区二&#xff1a;挂载到obs2目录 [rootcontroller ~ 11:45:09]# fdisk /dev/sdbWelcome to fdisk (util-linux 2.32.1). Changes will remain in memory onl…...

编程新知 2026/5/21 13:17:17