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

【Vue面试题十七】、你知道vue中key的原理吗？说说你对它的理解

news 2026/6/4 15:41:11

文章底部有个人公众号：热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享？ 踩过的坑没必要让别人在再踩，自己复盘也能加深记忆。利己利人、所谓双赢。

面试官：你知道vue中key的原理吗？说说你对它的理解

在这里插入图片描述

一、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的原理吗？说说你对它的理解

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;你知道vue中key的原理吗…...

编程日记 2023/10/12 1:08:40

【数据结构】二叉树--堆排序

目录 一 降序(建小堆) 二 升序 (建大堆) ​三 优化(以升序为例) 四 TOP-K问题 一 降序(建小堆) void Swap(int* x, int* y) {int tmp *x;*x *y;*y tmp; }//降序 建小堆 void AdjustUp(int* a, int child) {int parent (child - 1) / 2;while (child > 0){if (a[chil…...

编程日记 2023/10/12 1:07:38

项目log日志mysql记录，熟悉python的orm框架

直接在项目里面创建一个class&#xff0c;这个类对应着mysql里面的表 我们运行项目&#xff0c;可以自动建立表 在.env中找到mysql的配置信息&#xff0c;这个是在NB服务器上运行的mysql&#xff0c;localhost需要变成NB服务器的ipv4地址 使用Mysql工具连接查看&#xff0c;连…...

编程日记 2023/10/12 1:06:36

【数据结构-字符串 四】【字符串识别】字符串转为整数、比较版本号

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是【字符串转换】&#xff0c;使用【字符串】这个基本的数据结构来实现&#xff0c;这个高频题的站点是&#xff1a;CodeTop&#xff0c;筛选条件为&…...

编程日记 2023/10/12 1:05:33

React 组件传 children 的各种方案

自定义组件的时候往往需要传 children&#xff0c;由于写法比较多样&#xff0c;我就总结了一下。 方案列表 1. 类组件1.1 类组件&#xff0c;不使用解构1.2 类组件&#xff0c;使用解构 2. 函数组件2.1 函数组件&#xff0c;不使用解构2.2 函数组件&#xff0c;外部解构2.3 函…...

编程日记 2023/10/12 1:04:32

如何在一个传统的html中，引入vueJs并使用vue复制组件？

如何在一个传统的html中&#xff0c;引入vueJs并使用vue复制组件&#xff1f; 1.1 引言1.2 背景1.3 解决方案1.3.1 解决方案一&#xff1a;直接使用clipboard(不推荐仅供参考学习)1.3.2 解决方案二&#xff1a;封装指令js库后使用 (推荐) 1.1 引言 这篇博文主要分享如何在一个…...

编程日记 2023/10/12 1:03:31

【轻松玩转MacOS】故障排除篇

引言 在使用 MacOS 时&#xff0c;遇到故障是在所难免的。不要担心&#xff0c;这篇文章将为您提供一些常见的故障排除步骤&#xff0c;并介绍如何联系苹果的支持团队寻求帮助。让我们一起来看看吧&#xff01; 一、常见的故障排除步骤 1.1 网络连接问题 如果你发现你的Mac…...

编程日记 2023/10/12 1:02:29

Linux基本指令（1）

Linux基本指令&#xff08;1&#xff09; 1.ls指令1.1ls的用法 2. pwd指令3.cd指令3.1 cd3.2补充内容3.3 cd - 指令3.4 cd ~ 指令 4. touch指令4.1stat指令 5.mkdir 指令6.rmdir/rm指令6.1补充内容 7.man指令8.nano 指令9.cat指令10 cp指令11 mv指令12 echo指令12.1 > 输出重…...

编程日记 2023/10/12 1:01:28

计算机毕业设计选题推荐-springboot 网上手机销售系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…...

编程日记 2023/10/12 1:00:27

2、vscode c++ 项目配置调试及运行

文章目录 1、项目布局2、多项目管理2.1 先是一个总的CMakeLists.txt2.2 每个项目2.3 多版本OPENCV 3、调试和运行 接上一篇文章&#xff0c;vscode和cmake的c环境配置好以后&#xff0c;我们要写项目&#xff0c;再写对应的CMakeLists.txt 1、项目布局 . ├── bin ├── bu…...

编程日记 2023/10/12 0:59:26

二叉搜索树的最近公共祖先

二叉搜索树的最近公共祖先-力扣 235 题 求二叉搜索树最近公共祖先&#xff08;祖先也包括自己&#xff09; 前提&#xff1a; 1.节点值唯一 2.p和q都存在 要点&#xff1a;若 p&#xff0c;q 在 ancestor 的两侧&#xff0c;则 ancestor 就是它们的最近公共祖先 解题思路&…...

编程日记 2023/10/12 0:57:24

LuatOS-SOC接口文档(air780E)-- i2c - I2C操作

常量 常量 类型 解释 i2c.FAST number 高速 i2c.SLOW number 低速 i2c.exist(id) i2c编号是否存在 参数 传入值类型 解释 int 设备id, 例如i2c1的id为1, i2c2的id为2 返回值 返回值类型 解释 bool 存在就返回true,否则返回false 例子 -- 检查i2c1是否存…...

编程日记 2023/10/12 0:56:23

帝国cms改目录后打不开，帝国cms改目录生成后还是404

帝国CMS更改了网站域名或者栏目目录地址信息打不开的解决方法&#xff0c;一起来看看吧&#xff1a; 很多的小伙伴们&#xff0c;改了后台的系统设置里面的网站地址或者栏目目录地址&#xff0c;信息页就打不开的解决方法如下&#xff1a; 后台>系统>数据更新>更新信…...

编程日记 2023/10/12 0:54:21

计算机毕业设计选什么题目好？springboot智慧养老中心管理系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…...

编程日记 2023/10/12 0:53:20

创建一个基本的win32窗口

1.建立一个窗口的基本步骤 &#xff08;1&#xff09;向系统注册一个窗体类 &#xff08;2&#xff09;根据窗体类创建窗口 &#xff08;3&#xff09;进入消息循环 2.程序结构 (1)主函数的输入参数 int WINAPI WinMain( HISTANCE hInstance,//当前窗口的句柄 HINSTANCE hPr…...

编程日记 2023/10/12 0:52:19

如何在 Spring Boot 中使用 WebSocket

在Spring Boot中使用WebSocket构建实时应用 WebSocket是一种用于实现双向通信的网络协议&#xff0c;它非常适合构建实时应用程序&#xff0c;如在线聊天、实时通知和多人协作工具。Spring Boot提供了对WebSocket的支持&#xff0c;使得在应用程序中集成WebSocket变得非常容易…...

编程日记 2023/10/12 0:51:18

ubuntu2023装完显卡驱动和CUDA CUDNN开机只有下划线闪烁

解决方法 网上很多方案&#xff0c;如Ubuntu开机后卡死只有左上角有一个下划线不停闪烁_ubuntu开机左上角横杠一直闪-CSDN博客&#xff0c;原因是显卡驱动和系统内核不兼容&#xff0c;解决方案是CtrlAltF2打开tty模式进行问题检查 但是我CtrlAltF2完全没反应。 于是&#xf…...

编程日记 2023/10/12 0:50:17

MySQL三种安装方法（yum安装、编译安装、二进制安装）

mysql安装 一、yum安装方式二、编译安装方式三、二进制安装方式 切记&#xff1a;一定要关闭防火墙和selinux&#xff01;&#xff01;&#xff01; 服务器配置&#xff1a;2C4G即可&#xff0c;一台 一、yum安装方式 mysql的官方网站&#xff1a;www.mysql.com 中文官网&…...

编程日记 2023/10/12 0:49:15

《视觉 SLAM 十四讲》第 7 讲 视觉里程计1 【如何根据图像 估计 相机运动】【特征点法】

github源码链接V2 文章目录 第 7 讲 视觉里程计17.1 特征点法7.1.1 特征点7.1.2 ORB 特征FAST 关键点 ⟹ \Longrightarrow ⟹ Oriented FASTBRIEF 描述子 7.1.3 特征匹配 7.2 实践 【Code】本讲 CMakeLists.txt 7.2.1 使用 OpenCV 进行 ORB 的特征匹配 【Code】7.2.2 手写 O…...

编程日记 2023/10/12 0:48:14

9. 一个SpringBoot项目运行

新手如何运行一个SpringBoot项目 1.SpringBoot项目运行 新创建的SpringBoot项目如何运行 2.启动lombok注解 点击该按钮&#xff0c;启动lombok注解支持 3.展示说明...

编程日记 2023/10/12 0:47:13

3分钟快速上手：用BetterNCM安装器彻底改造你的网易云音乐

3分钟快速上手&#xff1a;用BetterNCM安装器彻底改造你的网易云音乐 【免费下载链接】BetterNCM-Installer 一键安装 Better 系软件 项目地址: https://gitcode.com/gh_mirrors/be/BetterNCM-Installer 还在使用功能单一的网易云音乐吗&#xff1f;想不想让你的播放器拥…...

编程新知 2026/5/26 4:48:24

混合求解器：用神经网络增强传统微分方程数值方法

1. 项目概述&#xff1a;当数值方法遇到机器学习在科学计算和工程仿真领域&#xff0c;求解常微分方程&#xff08;ODE&#xff09;和偏微分方程&#xff08;PDE&#xff09;是绕不开的核心任务。无论是模拟电路中的电流变化、预测天气系统的演变&#xff0c;还是分析机械结构的…...

编程新知 2026/5/26 3:30:08

量子计算中Loschmidt回声相位测量的创新方法

1. 量子计算中的Loschmidt回声相位测量方法概述Loschmidt回声是量子动力学中一个重要的概念&#xff0c;它描述了量子系统在时间反演演化后与初始状态的相似程度。在量子计算领域&#xff0c;精确测量Loschmidt回声的相位信息对于理解量子系统的非平衡态行为、计算能量本征值以…...

编程新知 2026/5/26 3:09:56

BurpSuite 2025插件开发JDK版本兼容性实战指南

1. 为什么BurpSuite插件开发环境总在JDK版本上翻车&#xff1f;你是不是也经历过&#xff1a;下载好BurpSuite最新版2025.4&#xff0c;兴冲冲打开插件开发文档&#xff0c;照着官方示例写完第一个HelloWorld插件&#xff0c;一编译——java.lang.UnsupportedClassVersionError…...

编程新知 2026/5/26 1:39:10

Win10系统清理避坑指南：你的BAT脚本真的安全吗？盘点那些不能乱删的文件

Win10系统清理避坑指南&#xff1a;BAT脚本安全操作手册每次看到那些号称"一键清理系统垃圾"的BAT脚本在技术论坛被疯狂转发&#xff0c;我的工程师朋友老张就会忍不住摇头。上周他刚帮一位设计师修复了崩溃的Photoshop——原因正是某个清理脚本删除了Adobe的临时工作…...

编程新知 2026/5/26 1:35:09

三步实现跨架构程序兼容：Box64高效架构转换指南

三步实现跨架构程序兼容&#xff1a;Box64高效架构转换指南 【免费下载链接】box64 Box64 - Linux Userspace x86_64 Emulator with a twist, targeted at ARM64, RV64 and LoongArch Linux devices 项目地址: https://gitcode.com/gh_mirrors/bo/box64 你是否曾在ARM64…...

编程新知 2026/5/26 0:50:41

VMware ESXi 9.1.0.0集成NVME+网卡驱动版发布｜新特性+驱动集成+部署升级+FAQ全指南

一、ESXi 9.1.0.0 正式版核心新特性 VMware ESXi 9.1.0.0&#xff08;2026 年 5 月发布&#xff09;是 vSphere 9.1 核心组件&#xff0c;聚焦硬件兼容扩展、性能跃升、安全加固、运维简化四大方向&#xff0c;重点强化 NVMe 存储与网卡生态适配&#xff0c;以下为关键更新&am…...

编程新知 2026/5/26 0:24:13

文件-语言-系统：基础IO-2.0——IO重定向接口，语言层缓冲区，系统级缓冲区。内核级分析！

bit::Shadow✧(≖ ◡ ≖✿ 目录 重定向接口dup2() ">" ">>" "<" 函数原型 输出重定向1和2的使用 文件描述符表 ./a.out运行&#xff1a; "./a.out >"默认重定向是fd 1 合并标准输入输出 缓冲区 什么是缓冲…...

编程新知 2026/5/26 0:03:57

基于ATtiny84的智能冰箱监控器：低功耗温度与门状态监测方案

1. 项目概述&#xff1a;一个装在树莓派盒子里的智能冰箱管家如果你家里有台老冰箱&#xff0c;或者对食物储存温度特别在意&#xff0c;总担心冰箱门没关严或者突然断电导致内部升温&#xff0c;那么这个自己动手做的“冰箱看门狗”项目就太适合你了。它本质上是一个高度定制化…...

编程新知 2026/5/25 23:43:44

别再死记硬背了！用UE材质里的点积、叉积，5分钟搞定模型表面动态光效

用UE材质玩转动态光效&#xff1a;点积、叉积实战指南第一次接触UE材质编辑器时&#xff0c;看到那些密密麻麻的数学节点总让人头皮发麻。特别是"点积"、"叉积"这些听起来就很高深的术语&#xff0c;很容易让美术背景的创作者望而却步。但你知道吗&#xf…...

编程新知 2026/5/25 20:44:26