vue中v show和v if的異同

在學習vue的過程中，記錄一下相關知識點！

（2）v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。

（3）v-show 類似於css中的display屬性——不管初始條件是什麼，元素總是會被渲染，且只是簡單地基於 css 進行切換。

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。

不同點：

（1）實現本質方法不同

v-show本質就是通過設定css中的display設定為none，控制隱藏

v-if是動態的向dom樹內新增或者刪除dom元素

（2）編譯的區別

v-show其實就是在控制css

v-if切換有乙個區域性編譯/解除安裝的過程，切換過程中合適地銷毀和重建內部的事件監聽和子元件

（3）編譯的條件

v-show都會編譯，初始值為false，只是將display設為none，但它也編譯了

v-if初始值為false，就不會編譯了

（4）效能

v-show只編譯一次，後面其實就是控制css，而v-if不停的銷毀和建立，故v-show效能更好一點。

注意：因為v-show實際是操作display:" "或者none，當css本身有display：none時，v-show無法讓顯示

總結：如果要頻繁切換某節點時，使用v-show（無論true或者false初始都會進行渲染，此後通過css來控制顯示隱藏，因此切換開銷比較小，初始開銷較大），如果不需要頻繁切換某節點時，使用v-if（因為懶載入，初始為false時，不會渲染，但是因為它是通過新增和刪除dom元素來控制顯示和隱藏的，因此初始渲染開銷較小，切換開銷比較大）

vue中v if和v show的區別

v if 是根據條件來判斷是否要渲染該元素。而 v show是已經渲染了該元素用css來決定他顯不顯示。看起來似乎是v if比較好一點。但是作為元素間的切換的話。v if有較高的切換開銷。所以當如果你的頁面元素要經常切換的話用v show會比較好。當不需要經常切換的時候，這種情況就用v if比較好。...

vue中v if和v show的區別

相同點 v if與v show都可以動態控制dom元素顯示隱藏 不同點 v if顯示隱藏是將dom元素整個新增或刪除，而v show隱藏則是為該元素新增css display none，dom元素還在。需要注意的是，當乙個元素預設在css中加了display none屬性，這時通過if show修改...

vue中v show和v if的區別

v show seen hello,you see me div v if seen hello,you see me div var seen true var seen false script 上述 中v show和v if都可以實現相同的功能，但是v show在任何情況下，都會被渲染並且保留...