最近在寫組件時(shí)遇到一個(gè)問題，視圖需要根據(jù)接口返回的數(shù)據(jù)頻繁的切換狀態(tài)又使用v-if時(shí)候加載出來的試圖時(shí)閃爍

我們來看一下 v-if 和 v-show 的區(qū)別和優(yōu)先級

v-if 和 v-show 的區(qū)別

在切換 v-if 塊時(shí)，Vue.js 有一個(gè)局部編譯/卸載過程，因?yàn)?v-if 之中的模板也可能包括數(shù)據(jù)綁定或子組件。v-if 是真實(shí)的條件渲染，因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中合適地銷毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。

v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯(編譯會(huì)被緩存起來)。

相比之下，v-show 簡單得多——元素始終被編譯并保留，只是簡單地基于 CSS 切換。

簡單來說二者最大的區(qū)別是v-if只會(huì)在滿足條件時(shí)才會(huì)編譯，而v-show不管是否滿足條件始終會(huì)編譯，v-show的顯示與隱藏只是簡單的切換CSS的display屬性。

總結(jié)

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好。

此外，當(dāng) v-if 與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級，這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中，所以不推薦同時(shí)使用v-if 和 v-for。

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的if vue 跳出_vue使用v-if v-show 页面闪烁的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。