v-for比v-if优先级高，所以使用的话，每次v-for都会执行v-if,造成不必要的计算，影响性能，尤其是当之需要渲染很小一部分的时候。
1、v-if和v-for不建议同时使用
<ul>
<li v-for="(item,index) in list" v-if="item.isActive" :key="item.id">
{{ item.name }}
</li>
</ul>
如上例子即使用100个item中只有一个需要展示 使用了v-if也是需要循环整个数组的、这在性能上是极大的浪费。
2、解决方案
- 如何实在循环外部可以在外层嵌套已成template（页面不生成dom节点）、在外层v-if判断、然后在进行使用v-for循环
<template v-if="isShow">
<div v-for="(item,index) in list" v-if="item.isActive" :key="item.id">
{{ item.name }}
</div>
</template>
- 如果条件出现在循环内部、可以通过计算属性computed提前过滤掉那些不需要展示的数据
computed: {
listData: function() {
return this.list.filter(function (item) {
return item.isShow
})
}
}
3、注意事项
永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环
也可以考虑写成计算属性的方式
