vuejs在解析時出現閃爍的原因及防止閃爍的方法

在使用vuejs、angularjs開發時，經常會遇見在如Ch e這類能夠快速解析的瀏覽器上出現表示式（{{ express }} ），或者是 （div）的閃爍。對於這個問題由於 Script去操作DOM，都會等待DOM載入完成（DOM ready）。對於vuejs、angularjs這些會在DOM ready完會才回去解析html view Template，所以對於Chrome這類快速的瀏覽器你會看見有閃爍的情況出現。而對於IE7，8這類解析稍慢的瀏覽器大部分情況下是不會出現這個問題的。

　　解決方法：

　　在vuejs、angularjs中為我們提供了v-cloak、ng-cloak來實現防止閃爍的方案，同時對於bing文字（{{ express }} ）我們也可以改為v-bind、ng-bind來實現避免。

　　下面以vuejs為例：

　　#v-cloak

　　用法：

　　這個指令保持在元素上直到關聯例項結束編譯。和 CSS 規則如 [v-cloak] {  : none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標籤直到例項準備完畢。

　　示例：

　　?

　　1

　　2

　　3

　　4

　　5

　　6

　　[v-cloak] {

　　display: none;

　　}

　　<div v-cloak>

　　{{   }}

　　</div>

　　<div> 不會顯示，直到編譯結束。

　　原理：

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

　　例項：

　　?

　　1

　　2

　　3

　　4

　　5

　　6

　　//example1:

　　<span>{{price}}</span>

　　//example2:

　　<span v-bind="price">

　　//example3:

　　<span v-cloak>{{price}}</span>

　　上例子2和例子3實現的效果是一樣的，而例子1在vuejs解析{{price}}之前， 是可以看到"{{price}}"這個字串的。而例子2和例子3不會有這種閃爍的情況。