1.共同點
都是動態(tài)顯示DOM元素
2.區(qū)別
（1）手段：v-if是動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素；v-show是通過設(shè)置DOM元素的display樣式屬性控制顯隱匹耕；
（2）編譯過程：v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件馏段；v-show只是簡單的基于css切換；
（3）編譯條件：v-if是惰性的践瓷，如果初始條件為假院喜，則什么也不做；只有在條件第一次變?yōu)檎鏁r才開始局部編譯（編譯被緩存晕翠？編譯被緩存后喷舀，然后再切換的時候進行局部卸載); v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存淋肾，而且DOM元素保留硫麻；
（4）性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗樊卓；
（5）使用場景：v-if適合運營條件不大可能改變拿愧；v-show適合頻繁切換。
Tips：
（1）如果v-show作用的元素碌尔，css文件中display:none浇辜，通過v-show進行設(shè)置不能顯示該元素；
原因：v-show控制顯隱七扰，是通過js代碼去修改元素的element style，如果value為false陪白，設(shè)置display: none;如果value為true颈走，設(shè)置display: ''；于是value為true時咱士，只能將element style中的display效果清除立由，并不能覆蓋css中的display效果轧钓；
如下圖所示，value=true時锐膜，v-show改變的是element.style毕箍，由于無效，顯示效果由css文件中的display決定道盏。
解決辦法：
使用v-show的話而柑，在vue解析之前隱藏DOM的話，盡量在style屬性里面設(shè)置display的值荷逞，不要在css文件中媒咳。<ul v-touch:tap="message=2" style="display: none" v-show="show">
