v-if和v-for的优先级带来的性能优化问题

如果我们想根据用户的权限来设置一个列表是否渲染。代码如下

<div v-for='(item) in arrList' :key='item.id' v-if='userRank'>

操作和实现起来都没有什么问题。但是会带来不必要的性能消耗。Vue官方文档如是写道。

这句话代表着，当v-if和v-for同时出现。渲染函数会先执行到v-for。我们的本意是根据用户权限来控制是否显示一个列表。但是如果代码如上的话v-if实际上是执行到了列表渲染的每一项。

如果列表项较少的话，带来的性能消耗可能还不是很明显。如果数据项一多。计算机的性能消耗就十分可观。

所以如果遇到这种需求。建议的写法是

<div v-if = 'userRank'>
    <div v-for='(item) in arrList' :key='item.id' >
</div>

当然，如果需求是根据用户权限来选择性的展示列表的项目。我们就不得不将v-if写成和v-for同级。当然，根据不同的业务需求。可以选择性的使用v-if和

v-show来实现性能优化的目的。

<div v-for='(item) in arrList' :key='item.id' v-if='item.userRank'>