v-if和v-for一起使用，v-for的優(yōu)先級(jí)要高于v-if
- 為了過(guò)濾一個(gè)列表中的項(xiàng)目（比如
v-for = "user in users" v-if = "user.isActive"）。在這種情況下，請(qǐng)將users替換為一個(gè)計(jì)算屬性（比如activeUsers），讓其返回過(guò)濾后的列表。 - 為了避免渲染本應(yīng)該被隱藏的列表（比如
v-for = "user in users" v-if = "shouldShowUsers"）。這種情況下，請(qǐng)將v-if移動(dòng)至容器元素上（比如ul，ol）。
詳解
當(dāng)vue處理指令時(shí)，v-for比v-if具有更高的優(yōu)先級(jí)，所以這個(gè)模板：
<ul>
<li
v-for = "user in users"
v-if = " user.isActive"
:key = "user.id"
>
{{ user.name }}
</li>
</ul>
將會(huì)經(jīng)過(guò)如下運(yùn)算
this.users.map(function (user) {
if (user.isActive) {
return user.name
}
})
因此，哪怕我們只渲染出一小部分的用戶元素，也得在每次重新渲染的時(shí)候遍歷整個(gè)列表，不論活躍用戶是否發(fā)生了改變。
通過(guò)將其更換為如下的一個(gè)計(jì)算屬性上遍歷：
computed: {
activeUser: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
<ul>
<li
v-for = "user in activeUsers"
:key = "user.id"
>
{{ user.name }}
</li>
</ul>
我們將會(huì)獲得如下好處：
- 過(guò)濾后的列表只會(huì)在 users 數(shù)組發(fā)生相關(guān)變化時(shí)才被重新運(yùn)算，過(guò)濾更高效。
- 使用
v-for = "user in activeUsers"之后，我們?cè)阡秩镜臅r(shí)候只遍歷活躍用戶，渲染更高效。 - 解藕渲染層的邏輯，可維護(hù)性 (對(duì)邏輯的更改和擴(kuò)展) 更強(qiáng)。
也可以把：
<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>
通過(guò)將v-if移動(dòng)到容器元素，我們不會(huì)再對(duì)列表中的每個(gè)用戶檢查shouldShoeUsers。取而代之的是，我們只檢查一次，且不會(huì)在shouldShoeUsers為否的時(shí)候運(yùn)算v-for。
反例
<ul>
<li
v-for="user in users"
v-if="user.isActive"
: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>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
