key value vue 输出_Vue2.0 v-for 中 :key 到底有什么用?

v-for中不加:key貌似也能正常显示,那为什么要加:key呢?

我们知道vue可以动态的改变页面的结构,比如在一个div里面插入一个span标签,看似简单的操作,底层还是很复杂的,它是如何实现的呢?因为页面的html代码是dom树形结构,所以这个问题可以理解为将一棵树形结构转换为另一棵树形结构,diff算法就是用来干这个事的。要想把一棵树转换为另一棵树首先要解决的问题就是比较这两棵树之间的区别Vue对diff算法进行了优化,它是这样做的。

现在要把左边的dom树转换为右边的dom树,对每层去比较,找出每层节点的不同之处做相应的处理。

对于每一层节点是如何处理的呢?

原来的节点A(也可以为一组节点)去和转换后的节点C(也可以为一组节点)比较发现并不相同,则会创建节点C并删除节点A,节点B(也可以为一组节点)比较发现相同不变化,节点C和A比较发现不同,创建节点A,删除节点C.如此,该层的节点就由A B C转化成了 C B A 。

如此这番折腾,cpu估计会累的够呛,既然这些节点本身没有发生变化,只是位置变了,有没有可能只是去调整节点的位置而不用去做如此之多的创建,删除操作呢?必然是有的。

我们可以对同一层级的同组节点添加一个唯一的key进行区分,此处的key就好比数据库里面主键的概念,通过它可以唯一的确定一组节点。

这样vue就可以识别出每一组节点,经过比较key发现,A,B,C都是相同的。只是位置发生了变化,于是他就只是去做移动操作调整位置,而不是去做创建和删除的操作了,效率大大提高。

从这里可以看出,在做for循环的时候加入:key,可以让vue能够识别每一组节点,在一些场合中让我们的代码效率更高。

还有一个问题就是key的取值,很多伙伴习惯这里取索引index,能行吗?索引是按位置排序的,这里C的key变成了1,A的key变成了3,失去了key的功能,没有办法唯一确定一组节点了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/506938.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络项目——最小网元设计(阶段三)

目录阶段目标设计描述1、帧结构2、按目的转发3、反向地址学习4、未知广播测试情况其他想说的话阶段目标 本阶段主要完成链路层交换机的功能实现:单播目的地址判收、支持广播、有端口地址表、反向地址学习,并在含交换机的多网元情况下完成测试。 设计描…

token拦截器android_vue.js添加拦截器,实现token认证(使用axios)

什么是token?token是一个用户自定义的任意字符串,目前开发中,token都是在服务端生成并且token的值会保存到服务器后台。只有服务器和客户端知道这个字符串,于是,这个token就成了两者之间的秘钥,它可以让服务…

计算机网络项目——最小网元设计(阶段四)

目录阶段目标设计描述1、实体编址2、路由表设计3、路由配置4、路由器的存储转发5、端到端的图片传输测试情况其他想说的话阶段目标 本阶段需要对实体进行编址,实现NET层的IP地址到MAC层地址的映射,解决各层实体的标定区分和数据投递,同时网络…

扫一扫 移动端_移动端手机APP 身份证识别 手机扫一扫离线识别

证件识别是指能实现拍照自动输入身份信息,让用户完全告别手动输入身份证、驾驶证、行驶证等证件信息。它支持Android、 iOS 、Java、Linux等多终端形式接入,电 一山一,领九九,六八九八菱还能通过多样化的结果输出,满足…

电脑解锁后黑屏有鼠标_电脑开机黑屏只有鼠标

电脑开机黑屏只有鼠标经常使用电脑的朋友都会遇到电脑的各种故障,例如电脑开机黑屏只有鼠标,那么该怎么办呢?下面一起来看看电脑开机黑屏只有鼠标的解决办法。方法一、如果自己对电脑不懂的话,最简单的方法就是强制关机,这个关机…

figma应用——面向用户的咖啡点单APP的设计过程记录

目录概述设计阶段1、Brainstorm2、用户分析(1)用户画像(2)竞品分析(3)用户旅程地图(4)用户需求分析3、点单APP的demo设计(1)整体布局逻辑概览(2&a…

java右移位_java 、移位操作方法

<java" id"highlighter_505373">以上是正整数&#xff0c;运算结果如下。接下来看看将负数进行左移2位操作是什么情况&#xff0c;运算结果如下。为什么会-10的二进制会出现这么多的1呢&#xff1f;仔细数一下刚好有32位。首先需要了解的是java负数存储是…

打docker镜像_使用docker构建自己的镜像

在docker中&#xff0c;我们使用docker build构建一个新的镜像&#xff0c;构建镜像之前需要去编写Dockerfile这个文件才能否建一个新的镜像。官方文档&#xff1a;https://docs.docker.com/engine/reference/builder/#fromFROM&#xff1a;用于指定基础镜像RUN&#xff1a;构建…

3d打印主要的切片参数类型_3D打印混凝土工艺参数对成型精度的影响

3D打印混凝土技术作为新兴技术&#xff0c;由于其不需要模板&#xff0c;节省大量劳动力和可打印复杂造型的特点&#xff0c;得到了大家的关注。但是&#xff0c;利用3D打印技术建造想要的结构&#xff0c;成型精度是必须考虑的一个问题。成型精度受材料性能、打印设备及打印工…

web中hasmoreelements_Web开发模式【Mode I 和Mode II的介绍、应用案例】

开发模式的介绍在Web开发模式中&#xff0c;有两个主要的开发结构&#xff0c;称为模式一(Mode I)和模式二(Mode II).首先我们来理清一些概念吧&#xff1a;DAO(Data Access Object)&#xff1a;主要对数据的操作&#xff0c;增加、修改、删除等原子性操作。Web层&#xff1a;界…

网络传输大端序_大端、小端与网络字节序

大端(Big-Endian)&#xff0c;小端(Little-Endian)以及网络字节序的概念在编程中经常会遇到&#xff0c;网络字节序(Network Byte Order)一般是指大端(Big-Endian&#xff0c;对大部分网络传输协议而言)传输&#xff0c;大端小端的概念是面向多字节数据类型的存储方式定义的&am…

poi的sax模式读取xls_POI SAX 如何修改大excel 文件内容-问答-阿里云开发者社区-阿里云...

I think POI is using too much memory! What can I do?This one comes up quite a lot, but often the reason isnt what you might initially think. So, the first thing to check is - whats the source of the problem? Your file? Your code? Your environment? Or …

cupload怎么保存图片_原生js的图片上传插件cupload

插件描述&#xff1a;支持图片预览、像素限制、大小限制、多图上传、更新模式下页面初始化加载图片更新时间&#xff1a;2020-09-25 00:23:49更新说明&#xff1a;添加 删除时&#xff0c;同时删除服务器图片的功能&#xff0c;文档提供php实例。添加参数Url参数更新 {ele: &q…

mysql 半同步_mysql 主从同步 与 半同步

mysql主从同步复制定义主从同步使得数据可以从一个数据库服务器复制到其他服务器上&#xff0c;在复制数据时&#xff0c;一个服务器充当主服务器(master)&#xff0c;其余的服务器充当从服务器(slave)。通过配置文件&#xff0c;可以指定复制所有的数据库&#xff0c;某个数据…

mysql内存数据库性能_Mysql内存表配置及性能测试

centos7 mysql数据库安装和配可以参考一下文章&#xff0c;基本照做就可以了(我选的方法二)&#xff1a;http://www.cnblogs.com/starof/p/4680083.html说到内存表&#xff0c;首先有两个概念简单区分下&#xff1a;1.临时表&#xff1b;2.内存表&#xff1b;临时表与内存表的区…

mysql字符集排序规则_MySQL原理 - 字符集与排序规则

任何计算机存储数据&#xff0c;都需要字符集&#xff0c;因为计算机存储的数据其实都是二进制编码&#xff0c;将一个个字符&#xff0c;映射到对应的二进制编码的这个映射就是字符编码(字符集)。这些字符如何排序呢&#xff1f;决定字符排序的规则就是排序规则。查看内置字符…

mysql服务器默认操作字符集,如何在mysql中找到默认服务器字符集?

Using MySQL on FreeBSD 8.2. How do I find out the default server character set? Is there some command I can run or file I can check?UPDATEActually I want to know how to find both the default server character set and the current server character set.解决方…

mysql异常修复_MySQL错误修复:Table xx is marked as crashed and last (automatic?) repair failed...

问题一 Table xx is marked as crashed and last (automatic?) repair failed有开发找到我&#xff0c;说数据库坏了&#xff0c;连不上数据库&#xff0c;看了下 MySQL 的错误日志&#xff0c;报错如下&#xff1a;Error: Table ./db_name/table_name is marked as crashed a…

mysql 改变表的类型吗_mysql中修改表类型所带来的问题探讨

对于MySQL数据库&#xff0c;如果你要使用事务以及行级锁就必须使用INNODB引擎。如果你要使用全文索引&#xff0c;那必须使用myisam,那如何修改修改MySQL的引擎为INNODB呢&#xff0c;下面介绍一个修改方法。对于MySQL数据库&#xff0c;如果你要使用事务以及行级锁就必须使用…

mysql 字符串 截取字母_MySQL字符串函数:字符串截取

MySQL 字符串截取函数&#xff1a;left(), right(), substring(), substring_index()。还有 mid(), substr()。其中&#xff0c;mid(), substr() 等价于 substring() 函数&#xff0c;substring() 的功能非常强大和灵活。1. 字符串截取&#xff1a;left(str, length)mysql> …