原文轉自： 點我
Vue頁面加載時v-show設置的隱藏元素出現導致頁面閃爍問題
在寫APP社區頁面的時候在一些地方用了v-show，在刷新頁面的時候就發現即便在邏輯判斷為false某些元素不該顯示時也會露個臉，一閃而過，元素快小還好，如果是特別大的地方就看起來就很不爽，於是就上網搜了下看有沒有解決方法，結果還真有。
方法一: v-cloak
官方的解釋就一句話：這個指令保持在元素上直到關聯實例結束編譯。
光看這句話一頭霧水，后面緊接着說了用法：
和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例准備完畢。
也就是說v-cloak指令可以像CSS選擇器一樣綁定一套CSS樣式然后這套CSS會一直生效到實例編譯結束。
示例代碼：（親測可用）
<template>
<keep-alive include="index">
<router-view v-cloak></router-view>
</keep-alive>
</template>
<style>
/* 隱藏Vue代碼，所有的組件設置成隱藏 */
[v-cloak]:not(body) {
display: none;
}
</style>
方法二: v-text
vue中我們會將數據包在兩個大括號中，然后放到HTML里，但是在vue內部，所有的雙括號會被編譯成textNode的一個v-text指令。
而使用v-text的好處就是永遠更好的性能，更重要的是可以避免FOUC (Flash of Uncompiled Content) ，也就是上面與遇到的問題。
示例代碼：
<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>