vue中列表渲染

列表渲染

• 实际开发中，使用每条数据的唯一标识作为key,也就是对于数组列表，对象中的属性如：id、手机号、身份证号、学号等唯一值，对象列表同理

• 只要不对列表的逆序添加，逆序删除等破坏顺序的操作，仅用于渲染和展示。使用index作为key是没有问题的。

• 
     
  
         //:key是对象数组的身份证，对数组中的每个对象进行遍历
         
  {{name}}--{{age}}
         
  {{name}} -----{{age}}
         //对象遍历
         
  {{k}} -----{{value}}
      
  
  

• key的底层原理

• 遍历列表时，vue将初始数据转成虚拟DOM（页面），vue会给虚拟DOM添加key值，之后虚拟DOM转成真实DOM放入页面。

  如果用户修改了页面信息，vue根据新的数据生成新的虚拟DOM，新的虚拟DOM与虚拟DOM的数据对比

• 使用index作为key的问题

• 用：key="index"对原本的数组索引的顺序，造成了破坏。也就是新的虚拟DOM与虚拟DOM的对象，在索引位置为0的位置属性值不一致，就会实现，新的虚拟DOM与虚拟DOM的对象属性相同的部分，直接用虚拟DOM的对象属性。不相同的部分，用新的虚拟DOM对象属性。缺点一：产生新的DOM更新，效率低。缺点二：对象属性使用输入类的DOM，会产生错误

• 如果新的虚拟DOM与虚拟DOM的对象索引号匹配不上，则创建新的真实DOM，渲染到页面上。

• 
     
  
         
         点我添加一个对象到数组中
         
  {{name}} -----{{age}}
          
          
         
      
  
  

• 使用index作为key的思维图

•