vue中使用v-for渲染数据为何需要加key?

主要记录：
一、 有key和没key的差异
二、 key的作用
三、 相关demo代码

---

一、有key和没key的差异

1、without key:

no key.gif

当选中青丘白浅时，input添加一个新值(比如离镜)后选中是“离镜”，并不是我们想要的结果，我们想要的是当添加“离镜”后，选中的是青丘白浅。

2、with key:

key.gif

加了key之后，相同操作，选中青丘白浅，添加“离镜”后依旧选中的是青丘白浅，是我们理想的效果。
（demo的相关代码在文末~）

3、原理:

在我们进行添加数据后，vue内部时通过Diff算法对虚拟DOM进行更新，从而进行页面数据更新渲染。
的。

（1）diff算法原理-BC之间插入一个F节点：

①diff算法原理-BC之间插入一个F节点.png

（2）Diff插入一个节点时默认操作：

②Diff插入一个节点时默认操作.png

Diff算法插入节点的默认操作如图②，并没有准确地追踪F节点，将其放在准确位置。

（3）Diff加key唯一标识：

为了能把F节点放在准确位置，我们给F节点添加一个key值来作为唯一标识。有了key，Diff算法就可以正确识别F节点并把它插入正确的位置。

③Diff加key后正确插入节点.png

了解Diff原理之后，前面with key青丘白浅的例子应该就更通俗易懂了。

二、key的作用

"为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性"--Vue官网

:key="唯一标识" ,唯一标识可以是item里面id index等,key的作用主要是为了高效的更新虚拟DOM。

可以这样理解：v-for加key是为了添加唯一标识，让Diff算法可以正确识别节点并把它插入正确的位置，提高Vue对虚拟DOM的更新效率。

三、相关demo代码

    
    
    
    
    



    

        

            
没有:key
            
            添加
            

                

                    {{item.name}}
                
            
            
解释：当选中青丘白浅时，input添加一个新值(比如离镜)后选中的确是“离镜”，并不是我们想要的结果，我们想要的是当添加“离镜”后，一种选中的是青丘白浅
        
        

        

            
有:key
            
            添加
            

                

                    {{item.name}}
                
            
            
解释：同样当选中青丘白浅时，添加“离镜”后依旧选中的是青丘白浅。
            
:key="唯一标识" ,唯一标识可以是item里面id index等,key的作用主要是为了高效的更新虚拟DOM
            
"为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性"--官网
        
    
    
    

未完待续。。。

不定期更新笔记的日常~欢迎给♥