Vue文字閃爍問題

一、問題描述

程式碼示例：

<div id="app">
    <span>{{user.userName}}</span>
</div>

頁面顯示：

{{user.userName}}

問題詳情：在載入頁面的時候，剛開始我們會看到  {{user.userName}}  ，而後才可以被繫結的資料所替換，影響使用者的使用體驗。

二、問題分析

只有在DOM載入完成後，JavaScript才可以去操作DOM。對於vuejs、angularjs這些會在DOM ready後會才解析檢視模板，所以對於速度較快的瀏覽器，變回出現文字閃爍的情況。

三、解決方案

在 vue.js 已經給出瞭解決方案，即使用指令v-cloak；但是，如果頁面中多個標籤進行了資料繫結，我們顯然不能對所有的標籤一一使用v-cloak指令；其實，我們只需要找到Vue例項的掛載點el:"#app"，對該標籤使用v-cloak即可。對應的html檔案修改如下：

<div id="app">
    <span>{{user.userName}}</span>
</div>

另外，我們還需要在對應的css檔案中新增以下樣式：

[v-cloak] {
    display: none;
}

此時，文字閃爍問題已經解決；如果還是有文字閃爍的現象，請參考第四步：溫馨提示。

四、溫馨提示

1、v-cloak的 display 屬性可能被層級更高的樣式所覆蓋，必要時可做以下處理。

[v-cloak] {
    display: none !important;
}

2、因 v-cloak 樣式在@import 引入的css檔案中不起作用，需放在link引入的css檔案中或者內聯樣式中。

3、在v-cloak樣式的上方， 不可以 有註釋文字。