前面的条件渲染章节讲解了 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-近 置于外层元素上。例如、在一个电商网站的产品列表页面中,通常会先判断一下这个到表中的产品数量。如果列表是空的(例如没有搜索到用户查找的产品) ,那就显示一句提示语,而不再显示列表,