v-for與v-if的優先級

原文地址

---

 

永遠不要把 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>

---

返回目錄