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

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

news 文章来源：https://blog.csdn.net/qq_34595425/article/details/133893583 2025/5/1 12:13:52

在这里插入图片描述
一、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

基于闪电连接过程优化的BP神经网络（分类应用） - 附代码

基于闪电连接过程优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于闪电连接过程优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.闪电连接过程优化BP神经网络3.1 BP神经网络参数设置3.2 闪电连接过程算…...

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

Linux性能优化--性能工具：网络

7.0 概述 本章介绍一些在Linux上可用的网络性能工具。我们主要关注分析单个设备/系统网络流量的工具&#xff0c;而非全网管理工具。虽然在完全隔离的情况下评估网络性能通常是无意义的(节点不会与自己通信),但是&#xff0c;调查单个系统在网络上的行为对确定本地配置和应用程…...

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

【Linux】线程互斥与同步

文章目录 一.Linux线程互斥1.进程线程间的互斥相关背景概念2互斥量mutex3.互斥量的接口4.互斥量实现原理探究 二.可重入VS线程安全1.概念2.常见的线程不安全的情况3.常见的线程安全的情况4.常见的不可重入的情况5.常见的可重入的情况6.可重入与线程安全联系7.可重入与线程安全区…...

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

敏捷开发中，Sprint回顾会的目的

Sprint回顾会的主要目的是促进Scrum团队的学习和持续改进。在每个Sprint结束后&#xff0c;团队聚集在一起进行回顾&#xff0c;以达到以下目标&#xff1a; 识别问题&#xff1a; 回顾会允许团队识别在Sprint&#xff08;迭代&#xff09;期间遇到的问题、挑战和障碍。这有助于…...

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

排序【七大排序】

文章目录 1. 排序的概念及引用1.1 排序的概念1.2 常见的排序算法 2. 常见排序算法的实现2.1 插入排序2.1.1基本思想&#xff1a;2.1.2 直接插入排序2.1.3 希尔排序( 缩小增量排序 ) 2.2 选择排序2.2.1基本思想&#xff1a;2.2.2 直接选择排序:2.2.3 堆排序 2.3 交换排序2.3.1冒…...

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

人大与加拿大女王大学金融硕士项目——立即行动，才是缓解焦虑的解药

!在这个经济飞速的发展的时代&#xff0c;我国焦虑症的患病率为7%&#xff0c;焦虑已经超越个体范畴&#xff0c;成为整个社会与时代的课题。焦虑&#xff0c;往往源于我们想要达到的&#xff0c;与自己拥有的所产生的差距。任何事情&#xff0c;开始做远比准备做更会给人带来成…...

编程日记 2023/10/18 1:13:19

老卫带你学---leetcode刷题(46. 全排列)

46. 全排列 问题&#xff1a; 给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1&#xff1a;输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]示例 2&#x…...

编程日记 2023/10/18 1:11:17

6.6 图的应用

思维导图&#xff1a; 6.6.1 最小生成树 ### 6.6 图的应用 #### 主旨&#xff1a;图的概念可应用于现实生活中的许多问题&#xff0c;如网络构建、路径查询、任务排序等。 --- #### 6.6.1 最小生成树 **概念**&#xff1a;要在n个城市中建立通信联络网&#xff0c;则最少需…...

编程日记 2023/10/18 1:10:16

100问GPT4与大语言模型的关系以及LLMs的重要性

你现在是一个AI专家&#xff0c;语言学家和教师&#xff0c;你目标是让我理解语言模型的概念&#xff0c;理解ChatGPT 跟语言模型之间的关系。你的工作是以一种易于理解的方式解释这些概念。这可能包括提供 例子&#xff0c;提出问题或将复杂的想法分解成更容易理解的小块。现在…...

编程日记 2023/10/18 1:09:15

Linux：mongodb数据逻辑备份与恢复（3.4.5版本）

我在数据库aaa的里创建了一个名为tarro的集合&#xff0c;其中有三条数据 备份语法 mongodump –h server_ip –d database_name –o dbdirectory 恢复语法 mongorestore -d database_name --dirdbdirectory 备份 现在我要将aaa.tarro进行备份 mongodump --host 192.168.254…...

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