列表渲染

可以遍历数组，对象，字符串以及指定次数

demo

    
    
    




    

        

            
遍历数组
            

                {{p.name}}-{{p.id}}
            
            
            
遍历对象
            

                {{value.name}} - {{value.id}}
            

            
遍历字符串
            

                {{value}} - {{index}}
            

            
遍历指定次数
            

                {{index}}
            
        
    
    

key的作用 key与index

key的作用主要是diff的时候去判断是否复用节点还是创建新的节点。

拿react说，如果key一样，并且type一样，那么表示这个节点可以复用。如果不能复用，那么就涉及到新内存的申请和旧对象内存的回收，性能上表现不一样
(content 文案不一样？ 文案是作为子节点的，我们讨论的是复用当前节点)

index作为key只适用于数组的尾部操作，即数据的操作是保证先后顺序的
假如在数组头插入一个数据，以index作为key的话，那么key和type都是相同的，可以复用，就会造成第一条新数据的dom复用原来的第一个节点，导致界面出错

列表渲染、过滤、排序

    
    
    




    

        
        

            头插数组
            

                {{index}}
                
            
        
        
        

            
            id升序
            id降序
            原顺序
            

                {{p.name}}