v-for和v-if同时使用的注意事项

前面的条件渲染章节讲解了 v-if指令，需要注意的是，除非必要，否则不要将 v-if 和-for 用在同一个元素上。当它们处于同一节点时，v-for 的优先级比 v-if 高，v-for 每次选代时都会执行一次 v-if,这会造成不必要的计算开销，影响性能，尤其是当只需要渲染很小一部分的时候，表现尤为明显。比较好的做法是直接在数据模型中对列表进行过滤，以减少视图中的判断。例如，下面就是一个相当不好的案例，

<div id="app">

<p v-for="item in list" v-bind;key="item.id" v-if="item.id < 2">

((item.name))

</p>
</div>

对于上述情况，即使 100 个 item 中只有一个符合 v-if 的条件，也需要循环整个数组，这在性能上是一种浪费。在这种情况下，可以使用计算属性，在数据模型中事先做好处理，然后将符合条件的结果通过 v-for 显示出来，代码如下所示:

<div id="app">

<p v-for="item in filteredList" v-bind:key="item.id">

((item.name})

</p>

</div>
computed:{

filteredlist(){
return this.list.filter(function(item){

//返回id小于2的项井加到rilteredLit 数组中

return item.id < 2

})

}

}

两者的显示结果是一样的,但在性能上却相养很大。数据量小的情况下可能效果不太明显，但如果数据量大的话，区别就会很明显了。

另一种场景是，如果希望有条件地跳过循环的扩行、那么应该将 V-近 置于外层元素上。例如、在一个电商网站的产品列表页面中,通常会先判断一下这个到表中的产品数量。如果列表是空的(例如没有搜索到用户查找的产品) ，那就显示一句提示语，而不再显示列表，