最近在寫組件時遇到一個問題，視圖需要根據(jù)接口返回的數(shù)據(jù)頻繁的切換狀態(tài)又使用v-if時候加載出來的試圖時閃爍
我們來看一下 v-if 和 v-show 的區(qū)別和優(yōu)先級

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

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

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

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

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

總結(jié)

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

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