理解Vue中 key 的作用

理解Vue中 key 的作用

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。

• 如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。
• 而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误

最常见的用例是结合 v-for：

     
     

       
       

        
        

       
       
       
       

        
        

         
         <ul>
        
        
       
       

       
       

        
        

       
       
       
       

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

       
       

        
        

       
       
       
       

        
        

         
         </ul>
        
        
       
       
     
     

                                                                                                                                                                                 （官网） 

 

下面展来开理解

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

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

vue和react的虚拟DOM的Diff算法大致相同，Diff算法大致做法是比较old DOM树和 VDOM树之间的差异，根据差异更新虚拟DOM树。其核心是基于两个简单的假设：

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

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

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

 

                                             

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

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

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

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

比如一下这个情况：

                                  

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

                            

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？这种方式叫做：就地修改/复用相同类型元素

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

                                      

所以一句话，key的作用主要是为了高效的更新虚拟DOM。相当于给数组的每个元素都绑定唯一的key，如果某个key对应的元素发生变化，直接更新对应的dom就行，不用全部更新一遍。

这也是vue不推荐使用数组下标index作为key的原因。例如数组删除了一个元素，那么这个元素后方元素的下标全都前移了一位，之前index对应的dom和现在index对应的dom就会错位，导致之后的dom操作位置混乱。

 

另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

 

 

总结：

• vue为什么会有虚拟dom：为了减少页面渲染，引出虚拟dom，将所有视图上的更新先反映在虚拟dom上，再利用虚拟dom一次性更新视图
• 虚拟dom的作用：对比组件自身新旧vdom进行更新。
• key的作用：vue的一个优化，高效的更新虚拟DOM；
• key在操作中的作用：辅助判断新旧vdom节点在逻辑上是不是同一个对象；比如说数组里插入了一项，这就是很经典的例子
• key的优点（围绕其唯一性的特性展开）：
  • 1、准确。因为key的特性是唯一性。所以如果不加key，采用index的标记法，那么vue会选择复用同类型节点(Vue的就地更新策略)，导致之前节点的状态被保留下来,会产生一系列的bug.       
  • 2、快速。在元素list一直变化的情况下，key值设置唯一时，能很精确找到/找不到变更元素，若使用index标记，要遍历vnode，时间长。
• Vue的策略是不对dom直接更新，而是先比较oldDOM和VDOM 之间的区别，通过比较差别并且复用没有改变的dom，来快速的构建新的dom并渲染到页面

 

 

参考：官网解释

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

原文链接：

https://blog.csdn.net/weixin_39307273/article/details/104649420?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163142385416780269898408%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=163142385416780269898408&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_ecpm_v1~rank_v29_ecpm-5-104649420.first_rank_v2_pc_rank_v29&utm_term=vue+key%E7%9A%84%E4%BD%9C%E7%94%A8&spm=1018.2226.3001.4187