vue官方强烈建议不要将v-for和v-if用在同一个元素上
因为v-for比v-if有更高的优先级,所以即使只是需要通过v-if来渲染一部分内容,也需要在每次重新渲染的时候遍历整个列表,而不考虑需要的内容是否发生了变化,所以不在同一个元素上同时使用v-for和v-if是一种提升性能的手段
当然:需要进行这类操作一般分为两种情形:
一、过滤一个列表中的项目
例:
<ul>
<li
v-for="user of users"
v-if="user.isActive"
:key="user.id"
>
{{user.name}}
</li>
</ul>
可以这样改写:
定义一个计算属性去过滤列表,然后使用v-for去遍历计算属性
computed: {
activeUsers() {
return this.users.filter( user => {
return user.isActive
})
}
}
更改模板:
<ul>
<li
v-for="user of activeUsers"
:key"user.id"
>
{{user.name}}
</li>
</ul>
改写之后有以下好处:
- 计算属性中的内容只在原列表发生变化时才重新计算,不需要每次都去遍历原列表
- 渲染时只渲染需要的内容
- 解耦渲染层的逻辑,提高代码的可维护性
二、只渲染需要展示的列表
<ul>
<li
v-for="user of users"
v-if="showUsers"
:key="user.id"
>
</li>
</ul>
将v-if判断添加在其包裹容器上,就不需要每次都检查每一项的showUsers属性,而是只检查它一次,且不会在showUsers为false的时候进行v-for运算
<ul v-if="showUsers">
<li
v-for="user of users"
:key="user.id"
>
</li>
</ul>