Vue中为什么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>
就算改变users中的一个数据,整个都会重新渲染
正解:
如果条件出现在循环内部,可通过计算属性computed提前过滤掉那些不需要显示的项
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>