vue中v-if和v-for不建议同时使用的坑
前端开发工程师
参考官方文档：
在官方文档中明确指出v-for和v-if不建议一起使用。
原因：v-for比v-if优先级高，所以使用的话，每次v-for都会执行v-if,造成不必要的计算，影响性能，尤其是当之需要渲染很小一部分的时候。
<ul>
<li v-for="user in users" v-if="user.isActive" :key="user.id">
{{ user.name }}
</li>
</ul>如上述情况，即使有100个user中只有一个需要使用v-if，也需要整个循环数组，这在性能上是极大的浪费。
那难道就没有更好的解决办法，回答：当然是有解决方法的；我们可以使用computed
示例：
<div>
<div v-for="(user,index) in activeUsers" :key="user.index" >
{{ user.name }}
</div>
</div>
data () { // 业务逻辑里面定义的数据
return {
users,: [{
name: '111111',
isShow: true
}, {
name: '22222',
isShow: false
}]
}
}
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isShow;//返回isShow=true的项，添加到activeUsers数组
})
}
}总结：v-if比v-for优先级高，一起使用在性能上会造成极大的浪费，并且官网也并不推荐我们这样做，所以我们可以选择使用computed过滤掉列表中不需要显示的项目。
PS（这个世界本来就不公平，好好习惯吧你，頑張って！）
编辑于 2020-07-03 14:19