性能優(yōu)化-vue v-show和v-if的區(qū)別以及什么時候使用

1.v-if是動態(tài)的向DOM樹內添加或者刪除DOM元素;

2.v-show是通過設置DOM元素的display樣式屬性控制顯隱;

編譯過程:v-if切換有一個局部編譯/卸載的過程,切換過程中合適地銷毀和重建內部的事件監(jiān)聽和子組件;v-show只是簡單的基于css切換;

編譯條件:v-if是惰性的,如果初始條件為假,則什么也不做;只有在條件第一次變?yōu)檎鏁r才開始局部編譯(編譯被緩存?編譯被緩存后,然后再切換的時候進行局部卸載);

v-show是在任何條件下(首次條件是否為真)都被編譯,然后被緩存,而且DOM元素保留;

性能消耗:v-if有更高的切換消耗;v-show有更高的初始渲染消耗;

例:首次是條件是false 切不會多次重復編譯的情況下用v-if 反之則v-show

? ??

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容