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) ,也就是上面與遇到的問題。css

eg:
    <span v-text="message"></span>
    <!-- same as -->
    <span>{{message}}</span>
相關文章
相關標籤/搜索