vue頁面加載閃爍問題的解決方法

vue頁面加載閃爍問題的解決方法

v-if 和 v-show 的區別

v-if只會在知足條件時纔會編譯，而v-show無論是否知足條件始終會編譯，v-show的顯示與隱藏只是簡單的切換CSS的display屬性。
也就是說，在使用v-if時，若值爲false，那麼頁面將不會有這個html標籤生成。而v-show：不論其值是false仍是true，html元素都會存在，只是簡單的切換css的display屬性。

使用場景

通常來講，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。所以，若是須要頻繁切換 v-show 較好，若是在運行時條件不大可能改變 v-if 較好。

另外

1.v-if 指令能夠應用於template包裝元素上，而v-show不支持template
    2.將v-show應用在組件上時，由於指令的優先級 v-else 會出現問題，解決辦法就是用另外一個 v-show 替換 v-else

    // 錯誤
    <custom-component v-show="condition"></custom-component>
    <p v-else>這可能也是一個組件</p>
         // 正確作法
    <custom-component v-show="condition"></custom-component>
    <p v-show="!condition">這可能也是一個組件</p>

解決vue頁面加載時出現{{message}}閃退

方法一：v-cloak

v-cloak指令和css規則如[v-cloak]{display:none}一塊兒用時，這個指令能夠隱藏未編譯的Mustache標籤直到實例準備完畢。
    v-cloak 指令能夠像css選擇器同樣綁定一套css樣式而後這套css會一直生效到實例編譯結束。

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

方法二：v-text

vue中咱們會將數據包在兩個大括號中，而後放到HTML裏，可是在vue內部，全部的雙括號會被編譯成textNode的一個v-text指令。
而使用v-text的好處就是永遠更好的性能，更重要的是能夠避免FOUC (Flash of Uncompiled Content) ，也就是上面與遇到的問題。

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