Vue中的v-if 和 v-show 的區別

關於條件渲染

所謂條件渲染，就是根據不同的條件，使用不同的模板來生成 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 塊時，Vue.js 有一個局部編譯/卸載過程，因爲 v-if 之中的模板也可能包括數據綁定或子組件。v-if 是真實的條件渲染，因爲它會確保條件塊在切換當中合適地銷燬與重建條件塊內的事件監聽器和子組件。
v-if 也是惰性的：如果在初始渲染時條件爲假，則什麼也不做——在條件第一次變爲真時纔開始局部編譯（編譯會被緩存起來）。
相比之下，v-show 簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。
一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運行時條件不大可能改變 v-if 較好

v-if vs v-show

v-if 是“真正的”條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

v-if 也是惰性的：如果在初始渲染時條件爲假，則什麼也不做——直到條件第一次變爲真時，纔會開始渲染條件塊。

相比之下， v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<template>   <div id="app">     <div v-if="isIf">       if     </div>     <div v-show="ifShow">       show     </div>     <button @click="toggleShow">toggle</button>   </div> </template>   <script>   export default {     name: 'app',     data() {       return {         isIf : true,         ifShow : true,         loginType : "username"       }     },     methods: {       toggleShow : function(){         this.ifShow = this.ifShow ? false : true;         this.isIf = this.isIf ? false : true;       }     }   } </script>

看chrom控制檯能更明顯的看出來

對比可以看出v-if直接從代碼中刪除了，v-show只是通過display來切換狀態，因此建議頻繁切換的話用v-show比較好