v-if 跟 v-show 在 Vue.js 中的作用是什麼？有什麼差別？

v-if 是什麼？

v-if 指令式可以根據傳入的表達式回傳的布林值有條件地渲染元素或模板片段。

當 v-if 元素被切換時，該元素及其包含的指令和元件將被銷毀並重新構造。 如果初始條件為假，則根本不會呈現內部內容。這個指令式被切換的同時也會觸發 <transtion> ，可以用於動畫效果。

如果 v-for 與 v-if 一起使用時，v-if 的優先級高於 v-for，即使如此官方還是不建議在一個元素上同時使用這兩個指令，有關詳細信息，請參閱列表渲染指南。

v-if 與 v-else 和 v-else-if 如何搭配使用？

使用 v-else 的同時，相同階層的上一個元素必須帶有 v-if 或是 v-else-if 指令式，否則會造成編譯錯誤。v-else 用於做為前述的 v-if 與 v-else-if 的條件式都不被滿足時的預設選項。

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show 是什麼？

v-show 可以根據表達式值的布林值切換元素的可見性。v-show 通過 CSS 樣式中的 display 屬性來工作，並在元素可見時嘗試依據初始 display 的值，例如原先 display: table 時，在切換的狀態下會是 display: none 與 display: table。另外當其條件發生變化時，它也會觸發 <transition>，可用於動畫呈現。

<div v-show="boolValue">
  Show me!
</div>

v-if 與 v-show 的差異是什麼？

如同前述， v-if 會隨著布林值的更換而銷毀、重製元件，而 v-show 則是透過 CSS 屬性做顯示的改變，如果透過 Vue DevTools 觀察時，你會發現使用 v-show 的模板/元件會一直存在於 DOM 裡，而使用 v-if 的元件/模板則會變成註解消失。

參考： VueJS bulit-in directives

你可能也想知道：VueJS 的 v-cloak 是什麼？該如何使用？