v-if 和v-show區別

在切換 v-if 塊時，Vue.js 有一個局部編譯/卸載過程，因爲 v-if 之中的模板也可能包括數據綁定或子組件。

v-if 是真實的條件渲染，因爲它會確保條件塊在切換當中合適地銷燬與重建條件塊內的事件監聽器和子組件。

v-if 也是惰性的：如果在初始渲染時條件爲假，則什麼也不做——在條件第一次變爲真時纔開始局部編譯（編譯會被緩存起來）。

舉例：

<div id="app">
    <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>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

相比之下，v-show 簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。

一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。

因此，如果需要頻繁切換 v-show 較好，如果在運行時條件不大可能改變 v-if 較好。