>[success] # v-for 和v-if 不要同時在一個節點使用 ~~~ 1.下面內容選擇官方文檔 ~~~ [官方文檔--避免-v-if-和-v-for-用在一起-必要](https://cn.vuejs.org/v2/style-guide/?#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7-%E5%BF%85%E8%A6%81) >[danger] ##### 不要v-if 和 v-for一起用 ~~~ 1.永遠不要把'v-if'和'v-for'同時用在同一個元素上。 ~~~ 官方文檔給的建議： ~~~ 1.為了過濾一個列表中的項目 (比如v-for="user in users" v-if="user.isActive")。在這種情形下，請將`users`替換為一 個計算屬性 (比如`activeUsers`)，讓其返回過濾后的列表。 2.為了避免渲染本應該被隱藏的列表 (比如v-for="user in users" v-if="shouldShowUsers")。這種情形下，請將`v-if`移 動至容器元素上 (比如'ul','ol')。 ~~~ >[danger] ##### vue 文檔給的詳解 當 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> ~~~ 我們將會獲得如下好處： ~~~ 1.過濾后的列表只會在`users`數組發生相關變化時才被重新運算，過濾更高效。 2.使用v-for="user in activeUsers"之后，我們在渲染的時候只遍歷活躍用戶，渲染更高效。 3.解藕渲染層的邏輯，可維護性 (對邏輯的更改和擴展) 更強。 ~~~ 為了獲得同樣的好處，我們也可以把： ~~~ <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> ~~~ ~~~ 1.通過將`v-if`移動到容器元素，我們不會再對列表中的每個用戶檢查`shouldShowUsers`。取而代之的是，我們只檢查 它一次，且不會在`shouldShowUsers`為否的時候運算`v-for` ~~~ >[danger] ##### vue 文檔給的反例 ~~~ <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> ~~~ >[danger] ##### vue 文檔給的好例子 ~~~ <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> ~~~