vue 解析時表達式閃爍的問題

 

現象：

　　在使用 vuejs、angularjs 開發時，常常會碰見瀏覽器頁面閃現表達式 ({{ express }} ), 或者是模塊(div)的閃爍。

緣由：

　　因爲 JavaScript 去操做DOM，都會等待 DOM 加載完成（DOM ready）。對於 vuejs、angularjs 這些會在 DOM ready 完會纔回去解析 html view Template，因此對於 Chrome 這類快速的瀏覽器你會看見有閃爍的狀況出現。而對於IE7，8這類解析稍慢的瀏覽器大部分狀況下是不會出現這個問題的（沒驗證過....）。

 

解決辦法：

　　vuejs、angularjs中爲咱們提供了v-cloak、ng-cloak來實現防止閃爍的方案。

 

用法（vue 爲例）：

index.css :

[v-cloak] {
　　display: none;
} 

 

index.vue :

<div v-cloak>
    {{ message }}
</div> 

 

　　直到 表達式編譯完成，div 纔會顯示　　

原理：

　　帶有 v-clock 的的元素設置爲 display:none，隱藏掉，在等到 vue 解析到帶有 v-clock 的節點時候，會把 attribute 和 class 同時remove掉，這樣就能夠實現防止節點的閃爍。　　

 

注意：

　　在實際使用中，v-for 循環數據時可能會遇到不起做用的現象，要把 v-clock 放在跟 v-for 同一個標籤上，僅供參考。