v if與v show的區別

場景：

1、使用element-ui中el-upload元件作上傳

2、上傳成功後來回切換tab

3、tab是否顯示使用的是v-if

（粗略圖）

問題：1、上傳成功後，顯示，切換tab之後不顯示

問題分析：

1、是否顯示與路徑有關

2、console.log()以及檢視元素，位址一致，排除切換前後路徑不一致導致顯示問題

3、v-if的原理：v-if是通過控制dom節點的存在與否來控制元素的顯隱，來回切換tab導致元素銷毀、重建

問題解決：

使用v-show代替v-if，避免銷毀和重建導致節點內部事件監聽和子元件。

問題延伸：v-if和v-show的區別，什麼時候使用v-if或v_show？

區別：1）v-if是通過控制dom節點的存在與否來控制元素的顯隱；v-show是通過設定dom元素的display樣式，block為顯示，none為隱藏；

2）編譯過程：v-if切換有乙個區域性編譯/解除安裝的過程，切換過程中合適地銷毀和重建內部的事件監聽和子元件；v-show只是簡單的基於css切換；

3）編譯條件：v-if是惰性的，如果初始條件為假，則什麼也不做；只有在條件第一次變為真時才開始區域性編譯（編譯被快取？編譯被快取後，然後再切換的時候進行區域性解除安裝); v-show是在任何條件下（首次條件是否為真）都被編譯，然後被快取，而且dom元素保留；

4）效能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；

使用場景：如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。

總結：v-if判斷是否載入，可以減輕伺服器的壓力，在需要時載入,但有更高的切換開銷;v-show調整dom元素的css的dispaly屬性，可以使客戶端操作更加流暢，但有更高的初始渲染開銷。如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。

參考: