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

v-if只會(huì)在滿足條件時(shí)才會(huì)編譯，而v-show不管是否滿足條件始終會(huì)編譯，v-show的顯示與隱藏只是簡(jiǎn)單的切換CSS的display屬性。

也就是說(shuō)，在使用v-if時(shí)，若值為false，那么頁(yè)面將不會(huì)有這個(gè)html標(biāo)簽生成。而v-show：不論其值是false還是true，html元素都會(huì)存在，只是簡(jiǎn)單的切換css的display屬性。

使用場(chǎng)景

    一般來(lái)說(shuō)，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變 v-if 較好。  

另外

    1.v-if 指令可以應(yīng)用于template包裝元素上，而v-show不支持template

    2.將v-show應(yīng)用在組件上時(shí)，因?yàn)橹噶畹膬?yōu)先級(jí) v-else 會(huì)出現(xiàn)問(wèn)題，解決辦法就是用另一個(gè) v-show 替換 v-else

 // 錯(cuò)誤  <custom-component v-show="condition"></custom-component>  <p v-else>這可能也是一個(gè)組件</p>     // 正確做法  <custom-component v-show="condition"></custom-component>  <p v-show="!condition">這可能也是一個(gè)組件</p>

解決vue頁(yè)面加載時(shí)出現(xiàn){{message}}閃退

方法一：v-cloak

    v-cloak指令和css規(guī)則如[v-cloak]{display:none}一起用時(shí)，這個(gè)指令可以隱藏未編譯的Mustache標(biāo)簽直到實(shí)例準(zhǔn)備完畢。
    v-cloak 指令可以像css選擇器一樣綁定一套css樣式然后這套css會(huì)一直生效到實(shí)例編譯結(jié)束。

  eg:    // <div> 不會(huì)顯示，直到編譯結(jié)束。    [v-cloak]{      display:none;        }    <div v-cloak>       {{ message }}    </div>

方法二：v-text

vue中我們會(huì)將數(shù)據(jù)包在兩個(gè)大括號(hào)中，然后放到HTML里，但是在vue內(nèi)部，所有的雙括號(hào)會(huì)被編譯成textNode的一個(gè)v-text指令。

而使用v-text的好處就是永遠(yuǎn)更好的性能，更重要的是可以避免FOUC (Flash of Uncompiled Content) ，也就是上面與遇到的問(wèn)題。

eg:  <span v-text="message"></span>  <!-- same as -->  <span>{{message}}</span>

補(bǔ)充：

vue 頁(yè)面加載進(jìn)度條組件

頁(yè)面加載進(jìn)度條最初我是在youtube上看到的，后面幾乎在各大網(wǎng)站上都能見(jiàn)到它的身影，可以讓用戶在加載頁(yè)面的時(shí)候不會(huì)對(duì)著完全空白的頁(yè)面發(fā)呆，提升用戶體驗(yàn)

但是從開(kāi)發(fā)角度講，這種進(jìn)度條在真實(shí)性上確實(shí)很難把握，因?yàn)樵谶壿嫶a加載完成之前，我們都不能統(tǒng)計(jì)到進(jìn)度，而邏輯代碼自身的進(jìn)度也無(wú)法統(tǒng)計(jì)。另外，我們不可能監(jiān)控到所有資源的加載情況。

事實(shí)上，用戶并不是在乎你的頁(yè)面究竟加載了百分之幾，而真正關(guān)心的是離加載完還有多久，以及這個(gè)空白頁(yè)面是沒(méi)有加載完，還是加載完就是空白的。所以沒(méi)我們需要去“模擬”一個(gè)進(jìn)度條，在后端數(shù)據(jù)返回前利用一個(gè)假的動(dòng)畫效果模擬加載，在數(shù)據(jù)返回后讀完進(jìn)度條并且隱藏。