解決vue渲染時閃爍{{}}的問題

原文轉自： 點我

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>