列表渲染 之 v-for遍历数组和对象(利用key属性实现高效更新)

(1) 遍历数组和对象

    
    
    


    

        列表
        

            
{{list[0]}}
            
{{list[1]}}
            
{{list[2]}}
            
{{list[3]}}
        

        遍历数组
        
        

            
{{item}}
        
        
        

            
{{index}}-{{item}}
        


        遍历对象
        
        

            
{{item}}
        
        
        

            
{{key}}：{{item}}
        
        
        

            
{{index}}：{{key}}：{{item}}
        

    

(2) key属性的作用

• 说明：在列表中间节点插入新的数据节点时，即若希望在B和C之间加入一个F，Diff算法（Vue的虚拟DOM的different算法）会将之前的C更新为F、D更新为C、E更新为D、然后再更新E，效率很低。

中间插入.png

• key的作用：使用key来给每一个节点添加一个唯一标识，此时Diff算法就可以正确地识别此节点 并 找到正确的位置插入新的节点，从而高效地更新虚拟DOM，提升性能。
• 注意：我们在使用v-for时，建议为对应的元素或组件添加一个key属性；但是key需要具有唯一性，可使用item作为key，使用index作为key值其实无意义(并不能提升更新效率)。

    
    
    


    

        

            
{{item}}