v-for中key属性的作用和v-for与v-if一同使用的注意点（vue.js学习笔记）

1.key的作用

Vue中为v-for提供了一个属性，key，在写v-for的时候，都需要给元素加上一个key属性，这个key属性必须是唯一的标识，并且给key赋值的内容不能是可变的。

1. 提升v-for渲染的效率

        2. 提高渲染性能

        若对数据进行：逆序添加、逆序删除等破坏顺序操作， 会产生没有必要的真实DOM更新，虽然界面效果没问题, 但效率低。

        3.避免数据混乱的情况出现 

   如果结构中还包含输入类的DOM： 会产生错误DOM更新 ，出现数据混乱

使用 v-for 时，如果每次迭代的元素是一个对象，而不是一个简单的值，那么建议将数据模型中具有唯一性的属性绑定到 DOM 元素的 key 属性上。 

  
 
   
 
     
     添加  
   
 
   
 
     
{{item.todo}}
 
   
  
 
  

 

但是，这种做法在某些情况下就会产生一些问题。下面通过一个例子来进行说明，假设我们想要开发一个微型的“待办事项”(Todo List)页面。我们将在这个页面上列出一些待办事项，用户既可以添加新的待办事项，也可以在某个待办事项的前面打勾，表示已经完成该事项。

项目列表都是“就地更新”的，复选框仍然保持着原来的状态，而解决这个问题的方法 就是对li元素绑定key属性即在v-for后面添加v-bind:key： 

    {{item.todo}}

 一旦在 Vue.js 的列表中对 key 属性绑定了“唯一标识”以后，Vue.js 就可以明确地知道新元素应插人什么位置了。唯一标识一般使用对象的 id 等属性,用数据库中的术语来说，就是对象的“主键。

 

2.v-for与v-if一同使用的注意事项 

1.v-for和v-if不应该一起使用。
原因：v-for比v-if优先，即每一次都需要遍历整个数组，影响速度。 

v-if和v-for会有问题,不能用在统一标签上,否则性能会消耗很大
v-for 优先级 高于v-if
如果写在同一标签,
会先对所有数据进行一边循环一边执行v-if
再循环中多次对 DOM 元素进行添加或删除
这样会造成大量的性能消耗

 比较好的做法是直接在数据模型中对列表进行过滤，以减少视图中的判断。 

        

            {{item.name}}
        
    
 
    computed:{
        filteredList(){
            return this.list.filter(function(item) {
                // 返回id小于2的项斌添加到filteredList数组中
                return item.id < 2
            })
        }
    }

另一种场景是,如果希望有条件地跳过循环的执行，那么应该将 v-if置于外层元素上。

   
没有找到您搜索的产品
 
   
 
      
 
        名称:{{item.name}} 价格:{{item.price}} 
      
 
   
 

它们分别作用于条件渲染和列表渲染。v-if和v-show分开使用，除非必要，否则不要将 v-if和 v-for 用在同一个元素上。