# Vue - v-if 和 v-show 區別
## v-if：
- truthy 時渲染出 DOM，falsy 時移除 DOM
- 支援 v-else-if 、 v-else，且可使用於 `<template>`
- 有更高的**切換開銷**(會確保事件監聽器和子組件適當地被銷毀和重建)
- 適合在運行時**較少的條件切換**( ex. 判斷使用者登入與否的區塊 )
- vue.js 的預設為**重複利用已經存在的元素**，而不是重新渲染，必要時須搭配 key

## v-show：
- 初始會先把 DOM 渲染出來
- falsy 時切換元素的 CSS property `display:none`，元素依然存在於 DOM 並且渲染
- 有更高的**初始渲染開銷**(不管初始條件是什麼，元素總是會被渲染)
- 適合需要**非常频繁地切换**( ex. 互動視窗 Modal )

>[條件渲染](https://v3.cn.vuejs.org/guide/conditional.html#v-if)

>[透過v-if與v-show共用來節省渲染資源](https://guahsu.io/2018/08/vue-if-with-vue-show-singleton/)

###### tags: `Vue`