永遠不要把 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> <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 } })因此哪怕我們只渲染出一小部分用戶的元素，也得在每次重渲染的時候遍歷整個列表，不論活躍用戶是否發生了變化。
通過將其更換為在如下的一個計算屬性上遍歷：
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>我們將會獲得如下好處：
- 過濾后的列表只會在
users數組發生相關變化時才被重新運算，過濾更高效。 - 使用
v-for="user in activeUsers"之后，我們在渲染的時候只遍歷活躍用戶，渲染更高效。 - 解藕渲染層的邏輯，可維護性 (對邏輯的更改和擴展) 更強。
為了獲得同樣的好處，我們也可以把：
<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 移動到容器元素，我們不會再對列表中的每個用戶檢查 shouldShowUsers。取而代之的是，我們只檢查它一次，且不會在 shouldShowUsers 為否的時候運算 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>