VueJs 學習筆記 - v-if & v-show

v-if vs v-show

相同點：v-if 和 v-show 都可以動态的操作 DOM 結構的顯示與隐藏；

不同點：v-if 的顯示、隐藏是操作 DOM 結構的添加和移除，v-show 的顯示、隐藏是給 DOM 節點添加 display 屬性 block / none；

編譯過程：

v-if 切換有一個局部編譯、解除安裝的過程，該過程中合适的銷毀和重建内部的事件監聽和子元件；

v-show 隻是基于 CSS 的切換；

編譯條件：

v-if 是惰性的，如果初始條件為 false，則不做編譯渲染，隻有在第一次為 true 時才開始局部編譯（編譯被緩存？，切換時進行局部解除安裝）；

v-show 是在任何條件下都會被編譯，然後被緩存，而且 DOM 元素保留；

性能消耗：

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

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

使用場景：

v-if 适用于營運條件不大可能改變的場景；

v-show 适用于頻繁切換的場景；