這是再談系列的第二篇文章，講的是v-if和v-show作用於加載網絡圖片的img標籤之間的區別。衆所周知，v-if 作用的標籤是真正的條件渲染，具有惰性，只有當條件爲真值的時候會渲染標籤，在條件切換的過程中，標籤會重新渲染。v-show作用的標籤會都渲染出來，只不過會根據條件不同設置css的display屬性值，條件爲假時display設爲none。
img標籤加載網絡圖片需要時間，網絡情況不佳的情況下，加載圖片的過程中img標籤會變空白。一旦需要在多個img標籤之間根據條件進行渲染，大多數情況應該選擇v-show，這樣的用戶體驗會更好。一旦用了v-if，切換的時候如果圖片資源還未加載，就會去進行圖片資源的請求，這個過程中img所在區域就會變空白了（加載時間越長，這個過程越明顯），這也是爲什麼img需要在加載過程中給出一個加載效果，只是顯示空白的話用戶體驗就很差了。
下面筆者寫了個小例子來對比這兩種情況，先看一下v-if的情況，以下是v-if情況的動態圖，注意看控制檯的資源加載情況:
在網絡爲slow 3G的時候，我們明顯的可以看到v-if 進行切換的時候，由於圖片資源的請求所帶來的img空白效應。 一旦圖片都加載完後，再去進行切換，就會從緩存裏面去取圖片了，這個時候渲染就很快。
下面是v-show的情況：
我們看到一進入頁面所有的圖片資源都加載好了，這個時候v-show切換就不會出現img空白情況了。
移動端尤其需要考慮用戶體驗，因爲網絡情況十分複雜。建議移動端的條件渲染使用v-show，畢竟誰也不希望在切換的時候對着一片空白區域發呆。
常言道溫故而知新，可以爲師矣。同一個知識點，回頭再去看一眼，在不同的應用場景下會有不同的體驗。共勉。