v-if與v-show的區別

場景：

　　一、使用element-ui中el-upload組件做圖片上傳

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

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

　　（粗略圖）

問題：

　　一、上傳成功後，圖片顯示，切換tab以後圖片不顯示

　　二、來回切換，圖片的地址是一致的

問題分析：

　　一、圖片是否顯示與圖片路徑有關

　　二、console.log()以及查看元素，圖片地址一致，排除切換先後路徑不一致致使圖片顯示問題

　　三、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 較好。

 

參考: https://www.jianshu.com/p/7af8554d8f08