1 官方解釋
v-if 是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建霞玄。
v-if 也是惰性的：如果在初始渲染時(shí)條件為假骤铃，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開始渲染條件塊坷剧。
相比之下惰爬，v-show 就簡(jiǎn)單得多——不管初始條件是什么，元素總是會(huì)被渲染听隐，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換补鼻。
2 匯總別人的
（1）手段：v-if是動(dòng)態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素；v-show是通過設(shè)置DOM元素的display樣式屬性控制顯隱；
（2）編譯過程：v-if切換有一個(gè)局部編譯/卸載的過程风范，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件咨跌；v-show只是簡(jiǎn)單的基于css切換；
（3）編譯條件：v-if是惰性的硼婿，如果初始條件為假锌半，則什么也不做；只有在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯（編譯被緩存寇漫？編譯被緩存后刊殉，然后再切換的時(shí)候進(jìn)行局部卸載); v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存州胳，而且DOM元素保留记焊；
（4）性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗栓撞；
3. v-if 和 v-show 的使用場(chǎng)景
3.1 官方解釋
一般來說遍膜，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷瓤湘。
因此瓢颅，如果需要非常頻繁地切換，則使用 v-show 較好弛说；如果在運(yùn)行時(shí)條件很少改變挽懦，則使用 v-if 較好。
3.2 匯總別人的
v-if適合運(yùn)營條件不大可能改變木人；v-show適合頻繁切換信柿。
（1）對(duì)于管理系統(tǒng)的權(quán)限列表的展示，這里可以使用v-if來渲染虎囚，如果使用到v-show角塑，對(duì)于用戶沒有的權(quán)限蔫磨，在網(wǎng)頁的源碼中淘讥，仍然能夠顯示出該權(quán)限，如果用v-if堤如，網(wǎng)頁的源碼中就不會(huì)顯示出該權(quán)限蒲列。（在前后臺(tái)分離情況下，后臺(tái)不負(fù)責(zé)渲染頁面的場(chǎng)景搀罢。）
（2）對(duì)于前臺(tái)頁面的數(shù)據(jù)展示蝗岖，這里推薦使用v-show，這樣可以減少開發(fā)中不必要的麻煩榔至。
4. 總結(jié)
v-if和v-show都是用來控制元素的渲染抵赢。v-if判斷是否加載，可以減輕服務(wù)器的壓力，在需要時(shí)加載,但有更高的切換開銷;v-show調(diào)整DOM元素的CSS的dispaly屬性铅鲤，可以使客戶端操作更加流暢划提，但有更高的初始渲染開銷。如果需要非常頻繁地切換邢享，則使用 v-show 較好鹏往；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好骇塘。
