Vue2.0 v-for 中 :key 到底有什么用？

快来打我* 2021-12-22 02:09 413阅读 0赞

其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。

要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。

我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。

vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：

**1. 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。**

**2. 同一层级的一组节点，他们可以通过唯一的id进行区分。**

基于以上这两点假设，使得虚拟DOM的Diff算法的复杂度从**O(n^3)**降到了**O(n)**。

这里我们借用[React’s diff algorithm][React_s diff algorithm]中的一张图来简单说明一下：

![1170024-20171018191016162-1229549117.png][]

当页面的数据发生变化时，Diff算法只会比较同一层级的节点：

**如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点了。**

**如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。**

当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上原则。

比如一下这个情况：

![1170024-20171018191056146-436654927.png][]

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：

![1170024-20171018191119318-368188268.png][]

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们**需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。**

![1170024-20171018191142334-13876328.png][]

所以一句话，**key的作用主要是为了高效的更新虚拟DOM**。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，

否则vue只会替换其内部属性而不会触发过渡效果。

转载于:https://www.cnblogs.com/followme789/p/10948116.html

[React_s diff algorithm]: https://link.zhihu.com/?target=https%3A//calendar.perfplanet.com/2013/diff/
[1170024-20171018191016162-1229549117.png]: /images/20211220/394d6bbb20d140c5b9e05fc424d6c051.png
[1170024-20171018191056146-436654927.png]: /images/20211220/798f35035c414f4183dc7bacb57086c0.png
[1170024-20171018191119318-368188268.png]: /images/20211220/94b745d803eb49cbab5be38c76f11184.png
[1170024-20171018191142334-13876328.png]: /images/20211220/690767e22f9b4e838e6510aa3fe45dd4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，413人围观）

还没有评论，来说两句吧...

相关阅读

相关 Docker到底有什么用？

介：Docker是一个开源的应用容器引擎。 (不是一个虚拟机，是一个轻量级容器技术，实现了虚拟机技术里面的资源隔离) 性能要远远高于虚拟机。（启动虚拟机要几分钟，启动do...

╰半橙微兮°/ 2024年04月18日 17:51/ 0 赞/ 66 阅读

相关 Hive 到底有什么用？

MapReduce简化大数据编程难度，但对经常需大数据计算的人，如从事研究BI的数据分析师，他们通常使用SQL进行大数据分析和统计，MapReduce编程还是有门槛。且

骑猪看日落/ 2024年03月31日 12:19/ 0 赞/ 96 阅读

相关 Python中的函数到底有什么用？

经常碰到有些朋友问这样一些问题：我学习的python，学习了好多函数，可是不知道这些函数到底什么时候用，这些函数到底有什么用。答案呢实际上也

曾经终败给现在/ 2022年09月17日 03:09/ 0 赞/ 251 阅读

相关 hashCode到底有什么用？

hashCode概念 hashCode是jdk根据对象的地址算出来的一个int数字，即对象的哈希码值，代表了该对象在内存中的存储位置。我们都知道hashCode()

柔情只为你懂/ 2022年04月24日 23:36/ 0 赞/ 357 阅读

相关 Spring Bean到底是什么?有什么用？

Spring Bean是什么?有什么用？一、Bean到底是什么？二.怎么使用bean？三.Bean配置四.Bean的作用域 Bean在S

缺乏、安全感/ 2022年03月17日 11:01/ 0 赞/ 546 阅读

相关 Java中内部类到底有什么用？

java中内部类种类较多，语法比较复杂，用法也不尽相同。概括下来，可以分类为以下五种内部类。 1. 内部类 2. 嵌套内部类 3. 局部内部类 4. 接口内部类

野性酷女/ 2022年01月23日 12:07/ 0 赞/ 344 阅读

相关 Vue2.0 v-for 中 :key 到底有什么用？

其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。我们知道，vue和

快来打我*/ 2021年12月22日 02:09/ 0 赞/ 414 阅读

相关 5G到底有什么用？

　　手机自诞生以来经历了四代通信技术的演进，目前最先进的网络是4G LTE网络，而明年有些国家将会率先商用5G网络，手机厂商也会推出5G手机，多数人对于5G网络还比较陌生，那么

墨蓝/ 2021年12月04日 02:11/ 0 赞/ 354 阅读

相关 TiDB 到底有什么用

如今硬件的性价比越来越高，网络传输速度越来越快，数据库分层的趋势逐渐显现，人们已经不再强求用一个解决方案来解决所有的存储问题，而是通过分层，让缓存与数据库负责各自擅长的业务场景

比眉伴天荒/ 2021年06月10日 20:39/ 0 赞/ 647 阅读

相关 jQuery中的cache : false到底有什么用？

写Ajax代码写了很多，但事实证明，编程水平的高低不在于代码有没有写很多遍，而在于有没有动脑子去思考。很显然，我在jQuery的`cache : false`问题上面就没有

柔情只为你懂/ 2021年05月10日 11:18/ 0 赞/ 570 阅读