Vue使用注意事项：v-for和v-if不要一起使用
Sonder
2020-07-22
546字
1分钟
浏览 (2.2k)
原因：v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。
<ul>
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
{{ user.name }}
</li>
</ul>如上情况，即使100个user中之需要使用一个数据，也会循环整个数组。
正确：
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>