v-if和v-for的优先级是什么
v-for比v-if优先级高，所以使用的话，每次v-for都会执行v-if,造成不必要的计算，影响性能，尤其是当之需要渲染很小一部分的时候。
vue中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也是需要循环整个数组的、这在性能上是极大的浪费。
解决方案
1、如何实在循环外部可以在外层嵌套已成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>
2、如果条件出现在循环内部、可以通过计算属性computed提前过滤掉那些不需要展示的数据
computed: {
listData: function() {
return this.list.filter(function (item) {
return item.isShow
})
}
}
