v-if和v-show的用法

相同點

　　v-if 和 v-show 均可以動態控制 dom 元素顯示隱藏；

不一樣點

　　v-if 顯示隱藏是將 dom 元素整個添加或刪除（頻繁操做dom對性能影響很大）；

　　v-show 隱藏是爲該元素添加 display：none，dom 元素還存在；

性能消耗

　　v-if 有更高的切換消耗；

　　v-show 有更高的初始渲染消耗；

使用場景

　　當組件中某塊內容只會顯示或隱藏不會再次改變顯示狀態，此時用 v-if 更加合適，例如請求後臺接口經過後臺數據控制某塊內容是否顯示或隱藏，且這個數據在當前頁不會被修改；

　　當組件某塊內容顯示隱藏是可變化的，此時用 v-show 更加合理，例如頁面中有一個按鈕，點擊按鈕來控制某塊區域的顯示隱藏；

編譯條件

　　v-if 是惰性的，若是初始條件爲假，則什麼也不作，只有在條件第一次變爲真時纔開始局部編譯（編譯被緩存後，而後再切換的時候局部卸載）；

　　v-show 是在任何條件下都被編譯，而後被緩存，並且 dom 元素保留；

注意

　　當一個元素默認在css中加了 display：none屬性，這時經過 v-if 或者 v-show 修改成 true 是沒法讓元素顯示的。由於動態控制顯示隱藏，只是修改 display：none 或者display：" "，並不會覆蓋或者修改已經存在的css屬性~