永遠(yuǎn)不要把?v-if?和?v-for?同時(shí)用在同一個(gè)元素上。

一般我們在兩種常見的情況下會(huì)傾向于這樣做：

• 為了過濾一個(gè)列表中的項(xiàng)目 (比如?v-for="user in users" v-if="user.isActive")。在這種情形下，請將?users替換為一個(gè)計(jì)算屬性 (比如?activeUsers)，讓其返回過濾后的列表。

• 為了避免渲染本應(yīng)該被隱藏的列表 (比如?v-for="user in users" v-if="shouldShowUsers")。這種情形下，請將?v-if?移動(dòng)至容器元素上 (比如?ul,?ol)。

?

詳解

當(dāng) Vue 處理指令時(shí)，v-for?比?v-if?具有更高的優(yōu)先級，所以這個(gè)模板：

<ul><liv-for="user in users"v-if="user.isActive":key="user.id">{{ user.name }}</li> </ul>

將會(huì)經(jīng)過如下運(yùn)算：

this.users.map(function (user) {if (user.isActive) {return user.name} })

因此哪怕我們只渲染出一小部分用戶的元素，也得在每次重渲染的時(shí)候遍歷整個(gè)列表，不論活躍用戶是否發(fā)生了變化。

通過將其更換為在如下的一個(gè)計(jì)算屬性上遍歷：

computed: {activeUsers: function () {return this.users.filter(function (user) {return user.isActive})} } <ul><liv-for="user in activeUsers":key="user.id">{{ user.name }}</li> </ul>

我們將會(huì)獲得如下好處：

• 過濾后的列表只會(huì)在?users?數(shù)組發(fā)生相關(guān)變化時(shí)才被重新運(yùn)算，過濾更高效。
• 使用?v-for="user in activeUsers"?之后，我們在渲染的時(shí)候只遍歷活躍用戶，渲染更高效。
• 解藕渲染層的邏輯，可維護(hù)性 (對邏輯的更改和擴(kuò)展) 更強(qiáng)。

為了獲得同樣的好處，我們也可以把：

<ul><liv-for="user in users"v-if="shouldShowUsers":key="user.id">{{ user.name }}</li> </ul>

更新為：

<ul v-if="shouldShowUsers"><liv-for="user in users":key="user.id">{{ user.name }}</li> </ul>

通過將?v-if?移動(dòng)到容器元素，我們不會(huì)再對列表中的每個(gè)用戶檢查?shouldShowUsers。取而代之的是，我們只檢查它一次，且不會(huì)在?shouldShowUsers?為否的時(shí)候運(yùn)算?v-for。

本面試題為前端常考面試題，后續(xù)有機(jī)會(huì)繼續(xù)完善。我是歌謠，一個(gè)沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學(xué)習(xí)收藏）?

總結(jié)

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第七十四篇之v-if和v-for优先级（建议收藏）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。