首先要知道的是当它们处于同一节点， v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
先说下我们经常遇到如下的情况：
<ul>
<li v-for="item in list" v-if="item.isShow" :key="item.id">
{{item.title}}
</li>
</ul>
这样写很浪费性能，哪怕我们只渲染出一小部分数据，也得在每次重渲染的时候遍历整个列表，不论需要展示的数据是否发生了变化，所以我们要避免这样的写法，如果遇到这种情况，我们可以借助计算属性完成，如下：
// 计算属性
computed: {
showList: function() {
return this.list.filtitemer(function (item) {
return item.isShow
})
}
}
//渲染部分
<ul>
<li v-for="item in showList" :key="item.id">
{{item.title}}
</li>
</ul>
这样写的好处是：
1.过滤后的列表只会在 list 数组发生相关变化时才被重新运算，过滤更高效。
2.用 v-for="user in showList" 之后，我们在渲染的时候只遍历活跃用户，渲染更高效。
