vue中v-if和v-show的區別

不一樣點

一、實現方式

• v-if是根據後面數據的真假值判斷直接從Dom樹上刪除或重建元素節點；
• v-show只是在修改元素的css樣式，也就是display的屬性值，元素始終在Dom樹上。

二、編譯過程

• v-if切換有一個局部編譯/卸載的過程，切換過程當中合適地銷燬和重建內部的事件監聽和子組件；
• v-show只是簡單的基於css切換；

三、編譯條件

• v-if是惰性的，若是初始條件爲假，則什麼也不作；只有在條件第一次變爲真時纔開始局部編譯；
• v-show是在任何條件下（首次條件是否爲真）都被編譯，而後被緩存，並且DOM元素始終被保留；

四、性能消耗

• v-if有更高的切換消耗，不適合作頻繁的切換；
• v-show有更高的初始渲染消耗，適合作頻繁的額切換；