v-if & v-show

v-if 是

➤ 用於條件性地 真實 渲染一塊元素內容

<template> 上的 v-if

v-if 是一個指令，必須依附於某個元素。但還是可以在一個 <template> 元素上使用 v-if，這只是一個不可見的包裝器元素，最後渲染的結果並不會包含這個 <template> 元素。

v-show 是

➤ 用於條件性地渲染並 顯示 一塊元素內容

v-show 僅切換了該元素上的 CSS display 屬性，且 v-show 不能在 <template> 元素上使用，也不能和 v-else 搭配。

v-if vs. v-show​

• v-if 是 真實的 按條件渲染，在渲染切換時，條件元素區塊內的事件監聽器和子元件都會被銷毀與重建
• v-if 在 初次 渲染時，只有當條件是 true 才被渲染，若為 false，則不會做任何事
• v-show 無論元素條件如何，始終會被渲染，只是切換了 CSS display 屬性
• v-if 有更高的切換開銷，v-show 有更高的初始渲染開銷。如果需要頻繁切換，使用 v-show 較好；如果在運行時綁定條件很少改變，則 v-if 更合適

避免 v-if v-for 同時使用

當 v-if 和 v-for 同時存在於一個元素上，v-if 由於權重較高會先被執行，這將導致 v-if 無法存取 v-for 範圍內產生的迭代項變數。

<template>
  <ul>
    <li
      v-for="user in users"
      v-if="user.isActive"
      :key="user.id"
    >
      {{ user.name }}
    </li>
  </ul>
</template>

<template>
  <ul>
    <template v-for="user in users" :key="user.id">
      <li v-if="user.isActive">
        {{ user.name }}
      </li>
    </template>
  </ul>
</template>