1. 官方文檔
https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show
2. v-if 和 v-show 的區別
2.1 官方解釋
v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
2.2 匯總別人的
（1）手段：v-if是動態的向DOM樹內添加或者刪除DOM元素；v-show是通過設置DOM元素的display樣式屬性控制顯隱；
（2）編譯過程：v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀和重建內部的事件監聽和子組件；v-show只是簡單的基於css切換；
（3）編譯條件：v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變為真時才開始局部編譯（編譯被緩存？編譯被緩存后，然后再切換的時候進行局部卸載); v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存，而且DOM元素保留；
（4）性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；
3. v-if 和 v-show 的使用場景
3.1 官方解釋
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。
因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
3.2 匯總別人的
v-if適合運營條件不大可能改變；v-show適合頻繁切換。
（1）對於管理系統的權限列表的展示，這里可以使用v-if來渲染，如果使用到v-show，對於用戶沒有的權限，在網頁的源碼中，仍然能夠顯示出該權限，如果用v-if，網頁的源碼中就不會顯示出該權限。（在前后台分離情況下，后台不負責渲染頁面的場景。）
（2）對於前台頁面的數據展示，這里推薦使用v-show，這樣可以減少開發中不必要的麻煩。
4. 總結
v-if和v-show都是用來控制元素的渲染。v-if判斷是否加載，可以減輕服務器的壓力，在需要時加載,但有更高的切換開銷;v-show調整DOM元素的CSS的dispaly屬性，可以使客戶端操作更加流暢，但有更高的初始渲染開銷。如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。