關於條件渲染

所謂條件渲染，就是根據不同的條件，使用不同的模板來生成 html。 在 Vue.js 中，使用 v-if 和 v-show 指令來控制條件渲染。

區別

v-show 會在app初始化的時候編譯並且渲染，並且在之後一直存在。當切換v-show模塊時，只是簡單的更改css。
v-if 當切換v-if模塊時，Vue.js 有一個局部編譯/卸載過程，因為 v-if 之中的模板也可能包括數據綁定或子組件。v-if 是真實的條件渲染，因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內的事件監聽器和子組件。 v-if 是惰性的，如果為false，則什麽也不錯-不編譯，不渲染。 當第一次條件為真時，才開始編譯。

建議

v-show的切換消耗比較低，但是不會重新渲染子組件，所以最好用於靜態的內容或者不需要重新構建結構的組件。而 v-if 比較適合不太頻繁的切換狀態的組件。所以項目設計的時候，不要對復雜的業務設計模塊太頻繁的視圖切換。盡量將靜態內容和動態內容分離到不同的模塊中。

一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運行時條件不大可能改變 v-if 較好。

v-show 與 v-if區別