永遠不要把?v-if?和?v-for?同時用在同一個元素上。

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

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

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

?

詳解

當 Vue 處理指令時，v-for?比?v-if?具有更高的優先級，所以這個模板：

<ul><liv-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} })

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

通過將其更換為在如下的一個計算屬性上遍歷：

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>

我們將會獲得如下好處：

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

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

<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?移動到容器元素，我們不會再對列表中的每個用戶檢查?shouldShowUsers。取而代之的是，我們只檢查它一次，且不會在?shouldShowUsers?為否的時候運算?v-for。

本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。