**永遠不要把?`v-if`?和?`v-for`?同時用在同一個元素上。** ~~~ //好例子 <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> ~~~ 一般我們在兩種常見的情況下會傾向于這樣做： * 為了過濾一個列表中的項目 (比如?`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`。