https://www.cnblogs.com/gitByLegend/p/10837777.html

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