vue頁面優化中的v-show和v-if使用比較


在頁面中使用了v-if做了一個tab框,點擊不同的tab框,並加載不同的內容,
由於各tab框對應的內容是4到5張統計圖,加載的數據量比較大,發現后台請求響應
返回的時間很快,在100ms以內,但點擊tab框切換加載內容時,會有一個明顯的卡頓感。

 

 

v-if:根據表達式的值在DOM中生成或者銷毀一個元素,值是false就會在DOM中銷毀,反之會渲染相應元素到DOM中
支持加在<template>標簽上


v-show是根據表達式的值來顯示或者隱藏元素,根據的是display的值進行控制顯隱
不支持加在<template>標簽上


在v-if切換的時候,vue內部有一個局部編譯/卸載的過程,需要消耗較多時間。因為v-if可能是數據綁定或者子組件。
v-if是真真正正的條件渲染;然而他是惰性的,在初始值是false的時候,他就什么都不足,在為真的時候才會開始局部變異
相比之下v-show則是更簡單一下,僅僅是css上的切換
所以,v-if有更高的切換消耗,而v-show有更高的初始渲染消耗;
因此,如果是頻繁切換,就用v-show;在條件很難改變,比如某個模塊在用戶a出顯示,就用v-if

 

據上,我將tab頁切換控制顯示的v-if改為v-show后,頁面會很快的渲染和響應,不再出現短暫的停頓。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM