在 Vue.js 中,使用 v-if 和 v-show 指令來控制條件渲染。
1.二者的區別:
v-show :會在app初始化的時候編譯并且渲染,并且在之后一直存在。當切換v-show模塊時,只是簡單的更改css。
v-if :當切換v-if模塊時,Vue.js 有一個局部編譯/卸載過程,因為 v-if 之中的模板也可能包括數據綁定或子組件。v-if 是真實的條件渲染,因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內的事件監聽器和子組件。 v-if 是惰性的,如果為false,則什么也不錯-不編譯,不渲染。 當第一次條件為真時,才開始編譯。
2.優點與缺點:
v-show的切換消耗比較低,但是不會重新渲染子組件,所以最好用于靜態的內容或者不需要重新構建結構的組件。而 v-if 比較適合不太頻繁的切換狀態的組件。所以項目設計的時候,不要對復雜的業務設計模塊太頻繁的視圖切換。盡量將靜態內容和動態內容分離到不同的模塊中。