這篇文章主要介紹如何解決vue渲染時閃爍{{}}的問題，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

目前創(chuàng)新互聯(lián)建站已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站運營、企業(yè)網(wǎng)站設(shè)計、夏津網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

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

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

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

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

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

 適用場景：

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

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

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

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

 多條件

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

 方法一:template

<div v-if="xxx"></div>
<template v-else>
<div v-if="yyy"></div>
<div v-else></div>
</template>

 方法二：partical

元素是已注冊的 partial 的插槽，partial 在插入時被 Vue 編譯。 元素本身會被替換。 元素需要指定 name 特性。

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

示例：

// 注冊 partial
Vue.partial('my-partial', '<p>This is a partial! {{msg}}</p>')
<!-- 靜態(tài) partial -->
<partial name="my-partial"></partial>
<!-- 動態(tài) partial -->
<!-- 渲染 partial，id === vm.partialId -->
<partial v-bind:name="partialId"></partial>

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

 其他：

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

2.將v-show應(yīng)用在組件上時，因為指令的優(yōu)先級 v-else 會出現(xiàn)問題，解決辦法就是用另一個 v-show 替換 v-else

官方給出的示例如下：

// 錯誤
<custom-component v-show="condition"></custom-component>
<p v-else>這可能也是一個組件</p>
// 正確做法
<custom-component v-show="condition"></custom-component>
<p v-show="!condition">這可能也是一個組件</p>

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

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

 方法一: v-cloak

官方的解釋就一句話：這個指令保持在元素上直到關(guān)聯(lián)實例結(jié)束編譯。

 光看這句話一頭霧水，后面緊接著說了用法：

和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實例準(zhǔn)備完畢。

也就是說v-cloak指令可以像CSS選擇器一樣綁定一套CSS樣式然后這套CSS會一直生效到實例編譯結(jié)束。

 示例代碼：

// <div> 不會顯示，直到編譯結(jié)束。
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>

 方法二: v-text

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

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

示例代碼：

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

以上是“如何解決vue渲染時閃爍{{}}的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞標(biāo)題：如何解決vue渲染時閃爍{{}}的問題-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://vcdvsql.cn/article22/cscsjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站設(shè)計公司、網(wǎng)站排名、App設(shè)計、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)