淺解v if 和 v show 有什麼區別

2021-10-25 07:06:07 字數 527 閱讀 2996

簡單來說,v-if 的初始化較快,但切換代價高;v-show 初始化慢,但切換成本低

都是動態顯示dom元素

(1)手段:

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

v-show是通過設定dom元素的display樣式屬性控制顯隱;

(2)編譯過程:

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

v-show只是簡單的基於css切換;

(3)編譯條件:

v-if是惰性的,如果初始條件為假,則什麼也不做;只有在條件第一次變為真時才開始區域性編譯(編譯被快取?編譯被快取後,然後再切換的時候進行區域性解除安裝);

v-show是在任何條件下(首次條件是否為真)都被編譯,然後被快取,而且dom元素保留;

(4)效能消耗:

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

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

(5)使用場景:

v-if適合運營條件不大可能改變;

v-show適合頻繁切換。

v if 和 v show 有什麼區別?

這次咋們講講v if 和v show之間的區別?它們在使用的時候究竟有什麼不同之處呢 簡單來說 v if的初始化快,v show的初始化慢 但是它們的共同點是 都是動態顯示dom元素。v if 若值為false,那麼頁面將不會有這個html標籤生成,v if只有當滿足條件是才會編譯。v show 不...

v show和v if有何異同?

v show 用於根據條件展示元素 帶有v show指令的元素始終會被渲染並保留在 dom 中。v show只是簡單地切換元素的 css propertydisplay。注意,v show不支援元素,也不支援v else。2.v if v if是 真正 的條件渲染,因為它會確保在切換過程中條件塊內的...

v show 與 v if 有什麼區別?

v show 與 v if 有什麼區別?v if是真正的條件渲染,因為它會確保在切換過程中條件塊內的事件 和子元件適當地被銷毀和重建 也是惰性的 如果在初始渲染時條件為假,則什麼也不做 直到條件第一次變為真時,才會開始渲染條件塊。v show就簡單得多 不管初始條件是什麼,元素總是會被渲染,並且只是...