v-if和v-for的优先级
v-if和v-for的优先级1.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 }}<
·
v-if和v-for的优先级
1.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>
如上情况,即使有很多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-for比v-if优先级高,一起使用会浪费性能,不建议同时使用,如果必要的情况下,可以选择使用computed过滤掉不需要显示的项目。
更多推荐
已为社区贡献1条内容
所有评论(0)