vuejs在解析時(shí)出現(xiàn)閃爍問題如何解決

這篇文章主要介紹“vuejs在解析時(shí)出現(xiàn)閃爍問題如何解決”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“vuejs在解析時(shí)出現(xiàn)閃爍問題如何解決”文章能幫助大家解決問題。

原因：

在使用vuejs、angularjs開發(fā)時(shí)，經(jīng)常會遇見在如Chrome這類能夠快速解析的瀏覽器上出現(xiàn)表達(dá)式({{ express }} ),或者是模塊(div)的閃爍。對于這個(gè)問題由于JavaScript去操作DOM，都會等待DOM加載完成（DOM ready）。對于vuejs、angularjs這些會在DOM ready完會才回去解析html view Template，所以對于Chrome這類快速的瀏覽器你會看見有閃爍的情況出現(xiàn)。而對于IE7，8這類解析稍慢的瀏覽器大部分情況下是不會出現(xiàn)這個(gè)問題的。

解決方法：

在vuejs、angularjs中為我們提供了v-cloak、ng-cloak來實(shí)現(xiàn)防止閃爍的方案，同時(shí)對于bing文字({{ express }} )我們也可以改為v-bind、ng-bind來實(shí)現(xiàn)避免。

下面以vuejs為例：

#v-cloak

用法：

這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí)，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢。

示例：

[v-cloak] {
display: none;
} 
<div v-cloak>
{{ message }}
</div>

<div> 不會顯示，直到編譯結(jié)束。

原理：

帶有v-clock的的元素設(shè)置為display:none，隱藏掉，在等到vue解析到帶有v-clock的節(jié)點(diǎn)時(shí)候，會把a(bǔ)ttribute和class同時(shí)remove掉，這樣就可以實(shí)現(xiàn)防止節(jié)點(diǎn)的閃爍。

實(shí)例：

//example1:
<span>{{price}}</span>
//example2: 
<span v-bind="price"></span>
//example3: 
<span v-cloak>{{price}}</span>

上例子2和例子3實(shí)現(xiàn)的效果是一樣的，而例子1在vuejs解析{{price}}之前，用戶是可以看到"{{price}}"這個(gè)字符串的。而例子2和例子3不會有這種閃爍的情況。

關(guān)于“vuejs在解析時(shí)出現(xiàn)閃爍問題如何解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。