v-if和v-for的优先级
Posted 理小理...
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了v-if和v-for的优先级相关的知识,希望对你有一定的参考价值。
v-if和v-for的优先级
在官方文档中
v-if
是根据表达式的值truthiness
来有条件的渲染元素,在切换元素以及它的数据绑定/组件被销毁并重建,如果元素是<template>
,将提出它的内容作为条件块。
首先,v-for
和v-if
是不应该一起使用的,必要的情况下应该替换成commpouted
属性,是因为:v-for
在官方文档的解释中本身就比v-if
优先,如果每一次都需要遍历整个数组,将会影响速度,尤其是当只需要渲染很小一部分的时候。
同时:
在vue
处理指令时。v-for
比v-if
具有更高的优先级
<ul>
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
user.name
</li>
</ul>
经过了如下的运算:
this.users.map(function (user)
if (user.isActive)
return user.name
)
因此,哪怕我们只是渲染一小部分用户的元素,也是要经过每次冲渲染的时候遍历整个列表,而不论活跃用户是否发生了变化。
更改后:
将 users
替换为一个计算属性 (比如 activeUsers
),让其返回过滤后的列表
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>
- 经过过滤后的列表,只有在数据发生了变化的时候才会被运算,更加高效
- 在渲染的时候,只渲染活跃的用户
- 具有很高的可维护性。
同样,我们也可以通过不其他的方法来实现
错误写法:
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id"
>
user.name
</li>
</ul>
修改后:
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
user.name
</li>
</ul>
注意:
永远不要把 v-if
和 v-for
同时用在同一个元素上。
以上是关于v-if和v-for的优先级的主要内容,如果未能解决你的问题,请参考以下文章