? ? ? ? 總結：v-show通過元素添加css屬性控制顯示隱藏，v-if則是添加或刪除dom元素。v-if有更高的切換消耗，v-show有更高的初始渲染消耗。在原理分析上。v-show不管初始條件如何元素總會被渲染，v-if實現(xiàn)更復雜，需處理多種條件。使用場景傻姑娘，頻繁切換使用v-show，運行時條件很少改變用v-if。

共同點：

? ? ? ? v-show和v-if在vue中作用效果相同，都能控制元素在頁面是否顯示，用法也相同。當表達式為true時占據(jù)頁面位置，false時不占據(jù)頁面位置

區(qū)別：

? ? ? ?1.控制手段不同，v-show為元素添加css屬性控制顯示與隱藏。v-if則是添加或刪除dom元素；

? ? ? ?2.編譯過程不同：v-if局部編譯/卸載過程，v-show只是基于css切換；

? ? ? ?3.編譯條件不同：v-if是真正條件渲染，v-show由false變?yōu)閠rue時不觸發(fā)組件生命周期。v-if切換會觸發(fā)特定鉤子，觸發(fā)組件的beforeCreate、create、beforeMount、mounted鉤子，由true變?yōu)閒alse的時候觸發(fā)組件的beforeDestory、destoryed方法。

? ? ? ?4.性能消耗不同：v-if切換消耗高，v-show初始渲染消耗高

原理分析：

????????v-show不管初始條件如何，元素總會被渲染。通過設置dislay屬性實現(xiàn)；

????????v-if實現(xiàn)比較復雜，需處理else、else if等條件，通過表達式的值決定是否生成dom

使用場景:

????????如果需要非常頻繁的切換，則使用v-show較好；如果在運行時條件很少改變，則使用v-if較好

From：https://vue3js.cn/interview/vue/show_if.html#%E4%B8%89%E3%80%81v-show%E4%B8%8Ev-if%E5%8E%9F%E7%90%86%E5%88%86%E6%9E%90