vue中列表渲染相关知识(v-for)

普通的列表使用ul包含多个li实现，这样往往不够灵活。在原生js中能够动态渲染列表具体实现如下

我们再看看vue中如何实现列表渲染的

 

        

            
{{i}}
        
    

上面代码在v-for后通过i与j接收循环的参数

从上面代码可以知道v-for可以遍历：数组、对象、字符串、指定次数(数值)。另外可以看到页面中每次都输出了两个数，分别是i与j每次接收到的值，这两个数具体的值是什么呢？其实i就是循环list时接收到的list中保存的数据，而j呢则是每个数据的索引值或者是key。

有人会想v-for是否还有第三个参数呢？在这我们可以试验一下

{{i}}--{{j}}--{{k}}
        

我们可以看到最后的k并没有被渲染出来，这是因为k没有接收到参数，所以其值为undefined。而在vue中如果值为undefined的话是不会被渲染出来的。因此也能说明v-for是没有第三个参数的

key

在上面v-for对相关数据进行遍历时能很顺利的使用，并且也没有多大的错误。但是现在呢我需要将数据与用户进行交互，实现以下功能：页面中布有一按钮以及一无序列表ul，ul中的每个li后面都带有一输入框，当用户点击按钮时就会在数组最前方插入一条数据。先用之前的方法来实现一下

    

        添加
        
数组
        

            
{{i.name}}--{{i.age}}
        
​
    
    

​
    

  

我们可以看到当点击添加按钮后{name:'ww',age:20}能成功加入到数组中并在页面中渲染出来。接下来我们再演示一下在每个li中的input中输入对应的姓名后再点击添加按钮。

发现点击添加按钮后原本属于ww的空白输入框却到了ls后面，这明显不符合我们的需求。要如何才能避免这种情况产生呢？添加一个key

    

        添加
        
数组
        

            
{{i.name}}--{{i.age}}
        
​
    
    

​
    

这个代码对list中的数据进行了重构，在每组对象中都添加了一个id值用来作为key要绑定的值，页面呈现的结果正是我们所想要的。为什么加个key后就会使之前的问题迎刃而解呢？接下来我们就来具体看看key的作用。

key的作用

key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】之后Vue会根据【新虚拟DOM】与【旧虚拟DOM】的差异比较

key对比规则

1. 旧虚拟DOM中找到了与新虚拟DOM相同的key：若虚拟DOM中内容没变，直接使用之前的真实DOM;若虚拟DOM中内容变了，则生成新的真实DOM,随后替换掉页面中之前的真实DOM

2. 旧虚拟DOM中未找到与新虚拟DOM相同的key，这种情况下会创建新的真实DOM，随后渲染到页面上。

为什么不能用index作为key

1. 如果对数据进行逆序添加、删除等破坏顺序的操作，会产生没有必要的真实DOM更新，界面效果没问题

2. 如果结构中还包含输入（input）类的DOM,会产生错误DOM更新，会导致界面问题

如何选择key

1. 最好使用每条数据唯一标识作为key如：id、身份证等

2. 如果不存在对数据的逆序添加、删除等破坏顺序操作，仅用于渲染列表用于展示则可以用index作为key

为什么没有绑定key时会出现这种问题呢？是因为如果没有设置key那么key默认为绑定为index，所以key值尽量不要设置为index

列表的过滤

实现如百度搜索中的关键字索引

• 用watch实现

  
      
  
          
          
  
              
  {{str}}
          
  ​
      
  
  

• 用computed实现

  
      
  
          
          
  
              
  {{str}}
          
  ​
      
  
  

过滤前

过滤后
​​​​

列表排序

    

        
        降序
        升序
        原序
        

            
{{str.name}}--{{str.age}}
        

    

未排序前 降序排序