vue渲染時(shí)閃爍{{}}的問題及解決方法

v-if和v-show可能是日常開發(fā)中最常用的兩個(gè)指令，雖然看上去兩者功能是類似的，但是兩者還是存在很大區(qū)別的。

v-if與v-show區(qū)別：

在切換 v-if 塊時(shí)，Vue.js 有一個(gè)局部編譯/卸載過程，因?yàn)?v-if 之中的模板也可能包括數(shù)據(jù)綁定或子組件。v-if 是真實(shí)的條件渲染，因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中合適地銷毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。

v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯（編譯會(huì)被緩存起來）。

相比之下，v-show 簡(jiǎn)單得多——元素始終被編譯并保留，只是簡(jiǎn)單地基于 CSS 切換。

簡(jiǎn)單來說二者最大的區(qū)別是v-if只會(huì)在滿足條件時(shí)才會(huì)編譯，而v-show不管是否滿足條件始終會(huì)編譯，v-show的顯示與隱藏只是簡(jiǎn)單的切換CSS的display屬性。

適用場(chǎng)景：

明白了二者的本質(zhì)區(qū)別后什么時(shí)候適合用v-if什么時(shí)候用v-show也變得簡(jiǎn)單了。

一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變 v-if 較好。

比如說現(xiàn)在很多頁面在不同端表現(xiàn)是不同的，最常見的是很多的APP頁面在微信端打開時(shí)頁面上會(huì)顯示下載的提示，而在APP內(nèi)部則不會(huì)，像這樣的情況每個(gè)端的狀態(tài)在加載時(shí)就是確定的不會(huì)變的就適合用v-if，這樣在APP內(nèi)打開時(shí)顯示下載的部分直接就不會(huì)編譯。

而像頁面上元素根據(jù)不同條件顯示/隱藏這樣的地方用v-show是最合適的了，因?yàn)橄襁@種基本上兩個(gè)狀態(tài)要頻繁切換，如上面所說，v-show的切換消耗是小于v-if的。

多條件

很多時(shí)候代碼中需要多條件判斷，但是vue中只有v-if和v-else，沒有v-elseif這樣的指令。雖然沒有類似的指令，但依舊還是有幾種方法可以解決這個(gè)問題。

方法一:template

方法二：partical

元素是已注冊(cè)的 partial 的插槽，partial 在插入時(shí)被 Vue 編譯。 元素本身會(huì)被替換。 元素需要指定 name 特性。

這貨讓人想起javaScript原生的fragement元素，但卻不是一個(gè)東西。partial有靜態(tài)和動(dòng)態(tài)之分，而要解決上面的問題就要用到動(dòng)態(tài)partial。

示例：

要解決多個(gè)條件的問題，我們就可以為每種情況預(yù)先注冊(cè)好各自的partial，然后將partial的name屬性綁定到判斷條件，這樣就能實(shí)現(xiàn)多個(gè)條件判斷。

其他：

1.v-if指令可以應(yīng)用于template包裝元素上，而v-show不支持templete

2.將v-show應(yīng)用在組件上時(shí)，因?yàn)橹噶畹膬?yōu)先級(jí) v-else 會(huì)出現(xiàn)問題，解決辦法就是用另一個(gè) v-show 替換 v-else

官方給出的示例如下：

Vue頁面加載時(shí)v-show設(shè)置的隱藏元素出現(xiàn)導(dǎo)致頁面閃爍問題

在寫APP社區(qū)頁面的時(shí)候在一些地方用了v-show，在刷新頁面的時(shí)候就發(fā)現(xiàn)即便在邏輯判斷為false某些元素不該顯示時(shí)也會(huì)露個(gè)臉，一閃而過，元素快小還好，如果是特別大的地方就看起來就很不爽，于是就上網(wǎng)搜了下看有沒有解決方法，結(jié)果還真有。

方法一: 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指令可以像CSS選擇器一樣綁定一套CSS樣式然后這套CSS會(huì)一直生效到實(shí)例編譯結(jié)束。

示例代碼：

方法二: v-text

vue中我們會(huì)將數(shù)據(jù)包在兩個(gè)大括號(hào)中，然后放到HTML里，但是在vue內(nèi)部，所有的雙括號(hào)會(huì)被編譯成textNode的一個(gè)v-text指令。

而使用v-text的好處就是永遠(yuǎn)更好的性能，更重要的是可以避免FOUC (Flash of Uncompiled Content) ，也就是上面與遇到的問題。

示例代碼：

上面是我整理給大家的，希望今后會(huì)對(duì)大家有幫助。

相關(guān)文章：

零基礎(chǔ)學(xué)習(xí)AJAX之AJAX框架

零基礎(chǔ)學(xué)習(xí)AJAX之制作自動(dòng)校驗(yàn)的表單

ajax的get請(qǐng)求時(shí)緩存處理解決方法

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com